我知道有关类似主题的一些问题,但它们大部分相当于浮动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's picture" title="neatktp'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上询问它是否卡住:)