自动调整嵌套 div答案

【问题标题】：Auto-sizing nested divs自动调整嵌套 div
【发布时间】：2015-04-03 11:14:17
【问题描述】：

如果你看下面的代码

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<body>

<style type="text/css">

    #div1 {  border:1px solid red; overflow:hidden;  }
    #div1 ul {  list-style-type:none; margin:0; padding:0;  }
    #div1 li {  display:inline; float:left;  }
    #div2 {  background-color:pink; width:100%; height:40px;  }
    #div3 {  background-color:yellow; width:40px; height:40px;  }

</style>

<div id="div1">
<ul>
   <li><div id="div2">div2</div3></li>
   <li><div id="div3">div3</div3></li>
</ul>
</div>

</body>
</html>

一旦分配了 DIV3 的 40px 宽度，我正试图让 DIV2 占据父 div 的剩余宽度。

这可能吗？

【问题讨论】：

stackoverflow.com/questions/5540485/… 看看是否有帮助。 jsfiddle.net/qx32C/36

标签： html css

【解决方案1】：

我的建议是分别在ul 和li 上使用display:table 和display:table-cell，而不是float 和display:inline。为了让生活更轻松，我将id 移动到li 元素而不是divs

html

<div id="div1">
<ul>
   <li id="div2"><div>div2</div></li>
   <li id="div3"><div>div3</div></li>
</ul>
</div>

CSS

#div1 {  border:1px solid red; overflow:hidden;  }
#div1 ul {  list-style-type:none; margin:0; padding:0; display:table; width:100%;  }
#div1 li {  display:table-cell;  }
#div2 {  background-color:pink; width:100%; height:40px;  }
#div3 {  background-color:yellow; width:40px; height:40px;  }

JS FIDDLE

【讨论】：

谢谢！完美运行。

【解决方案2】：

块级元素——如<div> 或<li> 或任何带有display:block 的元素——将自动吸收可用宽度。这样的事情应该可以工作：

#div1 {
  border: 1px solid red;
  overflow: hidden;
}
#div2 {
  background-color: pink;
  height: 40px;
}
#div3 {
  background-color: yellow;
  float: right;
  width: 40px;
  height: 40px;
}

<div id="div1">
  <div id="div3">div3</div>
  <div id="div2">div2</div>
</div>

请注意，浮动内容需要首先放置才能使这种方法起作用。

【讨论】：