Question

我的问题如下：
边框不包含包含的项目。我知道这是因为我将内容项置于绝对位置，但我需要它们才能使布局工作。这也意味着我不能使用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并使用clearfix。

Answer 2

将position: absolute;的{{1}}更改为.content-item并将其设为position: relative;。移除float: left;和#content-1，您不再需要它们了。最后在你的html中插入一个新类（在2 #content-2 id之后）并在你的stylescheet中为该类添加#content。

实施例： http://jsfiddle.net/skeurentjes/xLTJp/1/

带有绝对定位元素的Clearfix

2 个答案: