具有绝对定位元素的clearfix

Question

我的问题是：
边框不包含包含的项目。我知道这是因为我将内容项目绝对定位，但是我需要它们是绝对的布局。这也意味着我无法使用clearfix解决方案（这意味着我必须浮动元素，这不是一个选项）。
所以我的问题是，如何获得父级以获得所包含元素的高度。

编辑：无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并使用 clearfix。

Answer 2

将.content-item的position: absolute;更改为position: relative;，并给它一个float: left;。删除#content-1和#content-2，您不再需要它们。最后，将新类插入您的HTML（在2个#content ID之后），然后在您的Stylescheet中添加clear: both;。

示例：http://jsfiddle.net/skeurentjes/xltjp/1/