绝对定位的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>