html - 具有绝对定位元素的 Clearfix

Question

我的问题如下:
边框不包裹包含的元素。我知道这是因为我将内容项定位为绝对的，但我需要它们是绝对的以使布局正常工作。这也意味着我不能使用 clearfix 解决方案(这意味着我必须 float 元素，这不是一个选项)。
所以我的问题是，如何让父 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 并使用 clearfix。