絕對定位的div在另一個絕對定位的div內容不是內容

Question

我有兩個div元素的「position：absolute」css規則集。在div div裏面有兩個浮動div元素。奇怪的部分是，孩子的div不適合與內容拉伸。它將所有內容都包裝在新的線上。它的行爲就像小孩div繼承父div的寬度一樣，只是展示內容所需的最小值。如果我刪除父div或設置足夠的寬度，子div被正確拉伸。什麼樣的CSS規則或規範限制了孩子div不伸展？感謝您的回覆。

<div id="wrapper"> 
    <div id="textbox"> 
     <div class="alignleft">Text on the left.</div> 
     <div class="alignright">Text on the right.</div> 
     <div class="clearfix"></div> 
    </div> 
</div> 

https://jsfiddle.net/rnwmxaLh/2/

Answer 1

的absolute position上#textbox是這裏的罪魁禍首。
刪除，div將伸展。

#wrapper { 
 
    position: absolute; 
 
    /*width: 100%;*/ 
 
    border: 10px solid blue; 
 
} 
 

 
#textbox { 
 
    /****position: absolute;****/ 
 
    border: 1px solid red; 
 
    background-color: white; 
 
} 
 

 
.alignleft { 
 
    float: left; 
 
} 
 

 
.alignright { 
 
    float: right; 
 
    /*margin-left: 20px;*/ 
 
} 
 

 
.clearfix { 
 
    clear: both; 
 
}

<div id="wrapper"> 
 
    <div id="textbox"> 
 
    <div class="alignleft">Text on the left.</div> 
 
    <div class="alignright">Text on the right.</div> 
 
    <div class="clearfix"></div> 
 
    </div> 
 
</div>