我知道有几个关于类似主题的问题,但它们主要是 float div/图像。我需要将图像(和 div)绝对定位(偏向右侧),但我只是希望文本围绕它流动。如果我 float 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 主题,所以这些代码都不是我的,只是在将图片放在那里时它不能完全工作。
最佳答案
我知道这是一个较老的问题,但我遇到它是为了做我认为你正在尝试做的事情。我已经使用 :before CSS 选择器创建了一个解决方案,因此它不适用于 ie6-7,但在其他任何地方都应该不错。
基本上,将我的图像放在一个 div 中,然后我可以在手前添加一个长的 float block 来将它向下撞,并且文本愉快地环绕它!
img {
float:right;
clear:both;
width: 50% ;
margin: 30px -50px 10px 10px ;
}
.rightimage:before {
content: '' ;
display:block;
float: right;
height: 200px;
}
你可以在这里查看:
关于html - 文本环绕绝对定位的 div,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/4748511/