我知道有几个关于类似主题的问题，但它们主要是浮动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'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上询问它:)
这个问题很容易解决。它使用的是white-space：nowrap;
<div class="position:relative">
<div style="position: absolute;top: 100%; left:0;">
<div style="white-space:nowrap; width: 100%;">
stuff
</div>
</div>
</div>
例如，我正在制作导航的下拉菜单，因此我使用的设置是
<ul class="submenu" style="position:absolute; z-index:99;">
<li style="width:100%; display:block;">
<a href="#" style="display: block;width: 100%;white-space: nowrap;">Dropdown link here</a>
</li>
<ul>
图像示例
此外，如果你仍然无法搞清楚，请查看你可以google的bootstrap模板的下拉菜单。然后找出它们是如何工作的，因为它们使用绝对位置并使文本占据100％宽度而不包装文本。
我知道这是一个较老的问题，但我遇到它想要做我认为你想要做的事情。我已经使用：在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;
}
你可以在这里查看：
当你绝对定位一个div时，你实际上是从文档流中取出它，所以其他元素就好像它不存在一样。
要解决这个问题，您可以改为使用边距：
.myDivparent
{
float: left;
background: #f00;
}
.myDivhascontent
{
margin-left: 10px; /*right, bottom, top, whichever you need*/
}
希望这会有所作为:)
正如@Kyle Sevenoaks所提到的，您正在从文档流程中获取绝对定位的内容。
据我所知，让父div包装绝对定位内容的唯一方法是使用javascript设置每次更改的宽度和高度。
在我看来，“绝对”特征名称很差，因为它的位置实际上是相对于第一个父级，而位置不是静态的
<div class="floated">
<div style="position: relative;">
<div class="AbsoluteContent">
stuff
</div>
</div>
</div>
我认为最好的选择是在浮动内容之后添加一个额外的div，但仍然在父级内部以清除以前的样式。
<div class="clear"></div>
和CSS：
.clear
{clear:both;}
我需要一个类似的解决方案来浮动一个拉出引号（不是图像），里面会有可变长度的文本。拉出引号需要插入到顶部的HTML中（文本流的外部），并向下浮动到包含文本的内容中。修改伦纳德上面的答案，有一个非常简单的方法来做到这一点！
请参阅Codepen工作示例：https://codepen.io/chadwickmeyer/pen/gqqqNE
/* This creates a space to insert the pullout content into the flow of the text that follows */
.pulloutContainer:before {
content: '' ;
display:block;
float: right;
/* The height is essentially a "margin-top" to push the pullout Container down page */
height: 200px;
}
.pulloutContainer q {
float:left;
clear:both;
/* This can be a set width or percent, if you want a pullout that floats left or right or full full width */
width: 30%;
/* Add padding as you see fit */
padding: 50px 20px;
}
<div id="container">
<div class="pulloutContainer">
<!-- Pullout Container Automatically Adjusts Size -->
<q>Lorem ipsum dolor sit amet, consectetur adipiscing elit Lorem ipsum dolor sit amet Lorem ipsum dolor sit amet, consectetur adipiscing elit Lorem ipsum dolor sit amet.</q>
</div>
<div class="content">
<h1>Sed Aucteor Neque</h1>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam in dui mauris. Vivamus hendrerit arcu sed erat molestie vehicula. Sed auctor neque eu tellus rhoncus ut eleifend nibh porttitor. Ut in nulla enim. Phasellus molestie magna non est.</
...INSERT MORE TEXT HERE...
</div>
</div>
绝对定位不允许您包装文本。您必须使用边距或填充来使用浮动和位置。
这是一个可能对某些人有用的技巧：
如果你有一个容器包含很多对象，并且你希望那个定位对象在某些情况下看起来很高，而在其他情况下（例如各种屏幕尺寸）下降，那么只需多次散布该对象的副本你的HTML，inline(-block)，或float，然后display:none根据你需要的条件，你不想看到的项目。
这是一个JSFiddle来准确显示我的意思：JSFiddle of right positioning high and low
注意：我只为效果添加了颜色。除了类名，subject-1和subject-2 div是彼此完全相同的副本。