Clearfix与绝对定位的元素(Clearfix with absolute positioned

我的问题是这样的：
边框没有包裹包含的项目。 我知道这是因为我定位的内容项是绝对的，但我需要他们绝对的布局工作。 这也意味着，我不能使用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;
}

Answer 1:

设置一个项目到float:left ，另一个position:absolute; right:0 position:absolute; right:0和使用clearfix 。

Answer 2:

更改position: absolute; 的.content-item到position: relative; 并给它一个float: left; 。 删除#content-1和#content-2你不需要他们了。 而在最后插入一个新的类到HTML（2后#content的ID），并添加一个clear: both; 在你stylescheet该类。

例如： http://jsfiddle.net/skeurentjes/xLTJp/1/

文章来源: Clearfix with absolute positioned elements