带有绝对定位元素的Clearfix
我的问题如下：
边框不会包装包含的项目。 我知道这是因为我将内容项绝对定位，但我需要它们对于布局的工作是绝对的。 这也意味着我不能使用clearfix解决方案（这意味着我必须浮动元素，这不是一个选项）。
所以我的问题是，如何让父div获取包含元素的高度。
编辑：没有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：
.mask{
position:relative;
width:800px;
border: 1px solid black;
}
.content-item{
position: absolute;
width:300px;
}
#content-1{
left:10px;
}
#content-2{
left: 300px;
}
设置一个项目float:left和另一个position:absolute; right:0 position:absolute; right:0并使用一个clearfix 。
改变position: absolute; 内容.content-item的position: relative; 并给它一个float: left; 。 删除#content-1和#content-2 ，你不再需要它们了。 最后在你的html中插入一个新的类（在#content id的后面）并添加一个clear: both; 到你的stylescheet中的那个类。
例如：http://jsfiddle.net/skeurentjes/xLTJp/1/
链接地址: http://www.djcxy.com/p/88463.html