帶有絕對定位元素的Clearfix

我的問題如下：
邊框不會包裝包含的項目。我知道這是因爲我將內容項絕對定位，但我需要它們對於佈局的工作是絕對的。這也意味着我不能使用clearfix解決方案（這意味着我必須浮動元素，這不是一個選項）。
所以我的問題是，如何讓父div獲取包含元素的高度。帶有絕對定位元素的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; 
}

來源

2012-11-02 Rick Hoving

設置一個項目float:left，另一個position:absolute; right:0並使用clearfix。

來源

2013-02-04 07:25:24 amirnissim

+10

這隻有在浮動元素的高度比固定位置高時纔有效。 – theorise

變化.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/

來源

2012-11-02 11:13:51 SKeurentjes

對不起，忘了你不能使用position：relative ;,我的代碼現在沒用了 – SKeurentjes

帶有絕對定位元素的Clearfix

回答

相關問題