文本环绕绝对定位的 div

我知道有一些关于类似主题的问题，但它们主要涉及浮动 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 主题，所以这些代码都不是我的，只是在放置图片时它不能完全工作。

我知道这是一个较老的问题，但我遇到它是为了做我相信你正在尝试做的事情。我已经使用 :before CSS 选择器制定了一个解决方案，所以它对于 ie6-7 来说不是很好，但在其他地方你应该很好。

基本上，将我的图像放在 div 中，然后我可以事先添加一个长的浮动块来将其向下碰撞，并且文本会愉快地环绕在它周围！

img {
  float:right;  
  clear:both;
  width: 50% ;
  margin: 30px -50px 10px 10px ;
}
.rightimage:before {
  content: '' ;
  display:block;
  float: right;
  height: 200px;

}

您可以在这里查看：

http://codepen.io/atomworks/pen/algcz http://codepen.io/atomworks/pen/algcz