8

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

​</p>

4

2 回答 2

8

将一项设置为float:left，将另一项设置为position:absolute; right:0并使用clearfix.

于 2013-02-04T07:25:24.187 回答
1

position: absolute;将of更改.content-item为position: relative;并给它一个float: left;. 删除#content-1and #content-2，你不再需要它们了。最后在你的 html 中插入一个新类（在 2 个#contentid 之后），并clear: both;在你的样式表中添加一个到该类。

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

于 2012-11-02T11:13:51.613 回答