Html 具有绝对定位元素的 Clearfix
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/13193903/
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
Clearfix with absolute positioned elements
提问by Rick Hoving
My problem is the following:
The border does not wrap the containing items. I know this is because I position the content-item absolute, but I need them to be absolute for the layout to work. This also means that I cannot use the clearfix solution (this means that I have to float the elements, which it not an option).
So my question is, how to I get the parent div to get the height of the contained elements.
我的问题如下：
边框不包裹包含的项目。我知道这是因为我将内容项定位为绝对，但我需要它们是绝对的才能使布局正常工作。这也意味着我不能使用 clearfix 解决方案（这意味着我必须浮动元素，这不是一个选项）。
所以我的问题是，如何获取父 div 以获取所包含元素的高度。
EDIT: No Javascript solution, CSS only
编辑：没有 Javascript 解决方案，只有 CSS
Html:
网址：
<div class="mask">
<div id="content-1" class="content-item">
Lorem ipsum dolor sit amet, consectetur adipisicing elit...
</div>
<div id="content-2" class="content-item">
Lorem ipsum dolor sit amet, consectetur adipisicing elit...
</div>
</div>????
CSS:
CSS：
.mask{
position:relative;
width:800px;
border: 1px solid black;
}
.content-item{
position: absolute;
width:300px;
}
#content-1{
left:10px;
}
#content-2{
left: 300px;
}
?
?
采纳答案by amirnissim
set one item to float:leftand the other to position:absolute; right:0and use a clearfix.
一个项目设置float:left，另一个position:absolute; right:0和使用clearfix。
回答by SKeurentjes
Change the position: absolute;of .content-itemto position: relative;and give it a float: left;. Remove #content-1and #content-2, you don't need them anymore. And at last insert a new class into your html (after the 2 #contentid's) and add a clear: both;to that class in your stylescheet.
更改position: absolute;的.content-item到position: relative;，并给它一个float: left;。删除#content-1和#content-2，您不再需要它们了。最后在您的 html 中插入一个新类（在 2 个#contentid之后），并clear: both;在您的样式表中向该类添加一个。
