html – 文本绕绝对定位的div

前端之家收集整理的这篇文章主要介绍了html – 文本绕绝对定位的div前端之家小编觉得挺不错的,现在分享给大家,也给大家做个参考。
我知道有关类似主题的几个问题,但它们主要是浮动div / image。我需要使图像(和div)绝对定位(从右到右),但我只需要文本流。它工作,如果我漂浮的div,但我不能把它放在我想要的地方。因为文本只是流过图片
<div class="post">
            <div class="picture">
  <a href="/user/1" title="View user profile."><img src="http://www.neatktp.com/sites/default/files/photos/BlankPortrait.jpg" alt="neatktp&#039;s picture" title="neatktp&#039;s picture"  /></a></div>
      <span class='print-link'></span><p>BlahBlahBlahBlahBlahBlahBlahBlahBlahBlahBlahBlahBlahBlahBlah.</p>
<p>BlahBlahBlahBlahBlahBlahBlahBlahBlahBlahBlahBlahBlahBlahBlah.</p>
        </div>

是HTML的一个例子

CSS是:

.picture img {
        background: #fff;
        border: 1px #ddd solid;
        padding: 2px;
        float: right;
}

.post .picture {
    display: block;
    height: auto;
    position: absolute;
    right: -10px;
    top: -10px;
    width: auto;
}

.post {
    border: 1px solid #FFF;
    border-bottom: 1px solid #e8ebec;
    padding: 37px 22px 11px;
    position: relative;
    z-index: 4;
}

这是一个Drupal主题,所以没有一个这个代码是我的,只是当它涉及到一张图片时,它并没有完全奏效。

解决方法

绝对定位将元素从普通文档流程中移除,因此它不与其他元素交互。也许你应该改变如何使用float来替代它,并在Stack Overflow上询问它是否被卡住:)
原文链接:https://www.f2er.com/html/232576.html

猜你在找的HTML相关文章