Question

我有两个div元素＆＃34; position：absolute＆＃34; css规则集。在子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>

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

1 个答案: