文本环绕绝对定位的div

Question

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

Answer 1

我知道这是一个较老的问题,但我遇到它想要做我认为你想要做的事情.我已经使用:在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

Answer 2

绝对定位将元素从正常文档流中取出,因此它不会与其他元素交互.也许你应该使用float修改如何定位它,如果你遇到困难,请在Stack Overflow上询问它:)

Answer 3

当你绝对定位一个div时,你实际上是从文档流中取出它,所以其他元素就好像它不存在一样.

要解决这个问题,您可以使用边距:

.myDivparent
{
   float: left;
   background: #f00;
}

.myDivhascontent
{
   margin-left: 10px; /*right, bottom, top, whichever you need*/
}

希望这会有所作为:)