另一个绝对定位 div 内的绝对定位 div 不按内容拉伸

【问题标题】：Absolute positioned div inside another absolute positioned div is not stretching by content另一个绝对定位 div 内的绝对定位 div 不按内容拉伸
【发布时间】：2017-03-08 23:33:39
【问题描述】：

我有两个带有“位置：绝对”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/

【问题讨论】：

标签： html css position absolute

【解决方案1】：

#textbox 上的 absolute position 是这里的罪魁祸首。
删除它，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>

【讨论】：

对不起。我应该更具体。我无法更改位置属性，因为它在实际中比在此示例中更复杂。但是我可以使用其他 css 规则和这些 div 的内容。我想找出导致这些行为的规则。