Html 文本环绕绝对定位的 div
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/1915831/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Text Wrapping around an absolute positioned div
提问by Paul Murphy
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/图像。我需要将图像（和 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>
Is an example of the HTML
是 HTML 的一个例子
With the CSS being:
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;
}
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.
这是一个 Drupal 主题，所以这些代码都不是我的，只是在将图片放在那里时它没有完全工作。
采纳答案by akamike
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 :)
绝对定位将元素从正常文档流中取出，因此它不与其他元素交互。也许你应该重新修改如何使用 float 来定位它，如果你卡住了，请在 Stack Overflow 上询问它:)
回答by Leonard
I know this is an older question but I came across it looking to do what I believe you were trying to. I've made a solution using the :before CSS selector, so it's not great with ie6-7 but everywhere else you should be good.
我知道这是一个较老的问题，但我遇到了它，希望做我相信你正在尝试的事情。我已经使用 :before CSS 选择器做了一个解决方案，所以它对 ie6-7 来说不是很好，但在其他任何地方你都应该很好。
Basically, putting my image in a div I can then add a long thing float block before hand to bump it down and the text wraps merrily around it!
基本上，将我的图像放在一个 div 中，然后我可以在手边添加一个长的浮动块以将其向下移动，并且文本会愉快地环绕它！
img {
float:right;
clear:both;
width: 50% ;
margin: 30px -50px 10px 10px ;
}
.rightimage:before {
content: '' ;
display:block;
float: right;
height: 200px;
}
You can check it out here:
你可以在这里查看：
回答by Kyle
When you position a div absolutely, you're effectively taking it out of the document flow, so the other elements will act as if it's not there.
当您绝对定位一个 div 时，您实际上是将它从文档流中取出，因此其他元素将表现得好像它不存在一样。
To get around this, you can instead use margins:
为了解决这个问题，您可以使用边距：
.myDivparent
{
float: left;
background: #f00;
}
.myDivhascontent
{
margin-left: 10px; /*right, bottom, top, whichever you need*/
}
Hopefully that will do the trick :)
希望这能解决问题:)
回答by jeroen
As mentioned by @Kyle Sevenoaks, you are taking absolute positioned content out of the document flow.
正如@Kyle Sevenoaks 所提到的，您正在从文档流中取出绝对定位的内容。
As far as I can see, the only way to have the parent divwrap the absolute positioned contents, is to use javascript to set the width and height on each change.
据我所知，让父级div包装绝对定位内容的唯一方法是使用 javascript 在每次更改时设置宽度和高度。
回答by Matt
In my opinon, the "Absolute" trait is poorly named, because its position is actually relative to the first parent whos position is not static
在我看来，“绝对”特征的命名很糟糕，因为它的位置实际上是相对于位置不是静态的第一个父级的
<div class="floated">
<div style="position: relative;">
<div class="AbsoluteContent">
stuff
</div>
</div>
</div>
回答by Chris G
I think the best option is to add an additional div after the float content, but still inside the parent to clear previous styles.
我认为最好的选择是在浮动内容之后添加一个额外的 div，但仍然在父级内部以清除以前的样式。
<div class="clear"></div>
And CSS:
和 CSS：
.clear
{clear:both;}
回答by Chadwick Meyer
I needed a similar solution to float a pullout quote(not an image) which would have variable length text inside. The pullout quote needed to be inserted into the HTML at the top (outside the flow of the text) and float down into the content with text that wraps around it. Modifying Leonard's answer above, there is a really simple way to do this!
我需要一个类似的解决方案来浮动一个拉出引用（不是图像），其中包含可变长度的文本。拉出引号需要插入到 HTML 的顶部（在文本流之外），然后向下浮动到带有环绕它的文本的内容中。修改上面伦纳德的回答，有一个非常简单的方法来做到这一点！
See Codepen for Working Example: https://codepen.io/chadwickmeyer/pen/gqqqNE
有关工作示例，请参阅 Codepen：https://codepen.io/chadwickmeyer/pen/gqqqNE
CSS
CSS
/* 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;
}
HTML
HTML
<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>
回答by Damian Green
Here's a trick that might work for some:
这是一个可能对某些人有用的技巧：
if you have a container packed with a lot of objects, and you want that positioned object to appear up high in certain cases, and down lower in other cases (various screen sizes for example), then just intersperse copies of the object multiple times in your html, either inline(-block), or with float, and then display:nonethe items you dont want to see according to the conditions you need.
如果您有一个装有很多对象的容器，并且您希望该定位的对象在某些情况下显示为高，而在其他情况下（例如各种屏幕尺寸）显示为低，那么只需在其中多次穿插该对象的副本你的 html，要么 ，要么inline(-block)，float然后display:none根据你需要的条件你不想看到的项目。
Here is a JSFiddle to show exactly what I mean: JSFiddle of right positioning high and low
这是一个 JSFiddle 来准确显示我的意思：正确定位高低的 JSFiddle
Note: I added color only for effect. Except for the class names, the subject-1 and subject-2 divs are otherwise exact copies of each other.
注意：我添加颜色只是为了效果。除了类名之外，subject-1 和 subject-2 div 是彼此完全相同的副本。
回答by Damian Green
There is an easy fix to this problem. It's using white-space: nowrap;
这个问题有一个简单的解决方法。它使用空格： nowrap;
<div style="position:relative">
<div style="position: absolute;top: 100%; left:0;">
<div style="white-space:nowrap; width: 100%;">
stuff
</div>
</div>
</div>
For example I was making a dropdown menu for a navigation so the setup I was using is
例如，我正在为导航制作下拉菜单，因此我使用的设置是
<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>
Image Examples
图像示例
Also if you still can't figure it out check out the dropdowns on bootstrap templates which you can google. Then find out how they work because they are using position absolute and getting the text to take up 100% width without wrapping the text.
此外，如果您仍然无法弄清楚，请查看您可以谷歌搜索的引导程序模板上的下拉菜单。然后找出它们是如何工作的，因为它们使用绝对位置并使文本占据 100% 的宽度而不包裹文本。
回答by iamtooamazing
Absolute positioning does not let you wrap text. You have to use float and position using margin or padding.
绝对定位不允许您换行文本。您必须使用边距或填充来使用浮动和位置。
