一尘不染

环绕绝对位置div的文字环绕

css

我知道有关类似主题的一些问题,但它们大部分相当于浮动div
/图像。我需要将图像(和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主题,所以这些代码都不是我的,只是在将图片放在那里时,它并没有完全起作用。


阅读 307

收藏
2020-05-16

共1个答案

一尘不染

绝对定位使该元素脱离正常的文档流,因此它不会与其他元素交互。也许您应该改用float来放置它,然后在Stack Overflow上询问它是否卡住:)

2020-05-16