文本围绕绝对定位的div [英] Text Wrapping around an absolute positioned div

问题描述

我知道有几个关于类似主题的问题，但他们主要是浮动div / image。我需要将图像（和div）完全定位（向右），但我只是希望文本可以在其周围流动。它工作，如果我浮动div，但然后我不能把它放在我想要的地方。因为它是文本在图片后面流动。

 < div class =post> 
< div class =picture> 
< a href =/ user / 1title =查看用户个人资料。>< img src =http://www.neatktp.com/sites/default/files/photos/BlankPortrait .jpgalt =neatktp&＃的图片title =neatktp& s图片/>< / a>< / div> 
< span class ='print-link'>< / span>< p> BlahBlahBlahBlahBlahBlahBlahBlahBlahBlahBlahBlahBlahBlahBlahBlahBlahBlah。< / p> 
< p> BlahBlahBlahBlahBlahBlahBlahBlahBlahBlahBlahBlahBlahBlahBlahBlahBlahBlah。< / p> 
< / div> 
  

是一个HTML示例

与CSS是：

  .picture img {
背景：#fff; 
 border：1px #ddd solid; 
 padding：2px; 
 float：right; 
} 
 
 .post .picture {
 display：block; 
 height：auto; 
位置：绝对; 
 right：-10px; 
 top：-10px; 
 width：auto; 
} 
 
 .post {
 border：1px solid #FFF; 
 border-bottom：1px solid＃e8ebec; 
 padding：37px 22px 11px; 
职位：亲属; 
 z-index：4; 
 
 
 
 $ b 
这是一个Drupal主题，所以这些代码都不是我的，只是它是没有完全工作，当涉及到一个图片。
解决方案
绝对定位将元素从正常的文档流中取出，因此它不会与其他元素进行交互。也许你应该修改如何使用float来定位它，如果你遇到困难，可以在Stack Overflow上询问它：）
 
I know there are a few questions about similar topics but they mostly amount to floating the div/image. I need to have the image(and div) positioned absolutely (off to the right) but I simply want the text flow around it. It works if I float the div but then I can't position it where I want. As it is the text just flows behind the picture.
    <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>
Is an example of the HTML

with the CSS being:
    .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;
}
It's a Drupal theme so none of this code is mine, it's just that it's not fully working when it comes to putting a picture there.
解决方案
Absolute positioning takes the element out of the normal document flow, and therefore it does not interact with the other elements. Perhaps you should revist how to position it using float instead, and ask about it here on Stack Overflow if you get stuck :)

                        
这篇关于文本围绕绝对定位的div的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！