带有绝对定位元素的Clearfix [英] Clearfix with absolute positioned elements

问题描述

我的问题如下：

边框不包装包含的项目。我知道这是因为我定位的内容项绝对，但我需要他们是绝对的布局工作。这也意味着我不能使用clearfix解决方案（这意味着我必须浮动元素，这不是一个选项）。

所以我的问题是，如何获得父div获得

> Html：

 < div class =mask> 
< div id =content-1class =content-item> 
 Lorem ipsum dolor sit amet，consectetur adipisicing elit ... 
< / div> 
< div id =content-2class =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; 
} 
  

解决方案

将一个项设置为 float：left ，另一个设置为 position：absolute; right：0 并使用 clearfix 。

My problem is the following:
The border does not wrap the containing items. I know this is because I position the content-item absolute, but I need them to be absolute for the layout to work. This also means that I cannot use the clearfix solution (this means that I have to float the elements, which it not an option).
So my question is, how to I get the parent div to get the height of the contained elements.

EDIT: No Javascript solution, CSS only

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;
}

​

解决方案

set one item to float:left and the other to position:absolute; right:0 and use a clearfix.

这篇关于带有绝对定位元素的Clearfix的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！