html - 在一个容器中安排 3 个 div 和一个具有自动高度的

Question

我正在尝试使用 float:left 排列 3 个 div 边，两个 div 的 child1 和 child3 的高度是固定的，但是 child2 没有高度，我需要 child2 div 的高度与容器 div 的高度相同.

 <div id="container">
   <div id="child1">Child1</div>
   <div id="child2">Child2</div>
   <div id="child3">Child3</div>
 <div>


 #container
 {
 margin-left: 3px;
 padding: 10px 0px;
 position: relative;
 display: block;
 width: 500px;
 background:yellow;
 overflow:hidden;
 }

 #child1
 {
 float:left;
 width:100px;
 height:300px;
 background:green;
 }


 #child2
 {
 float:left;
 width:100px;
 height:auto;
 background:cyan;
 }

 #child3
 {
 float:left;
 width:100px;
 height:400px;
 background:red;
 }

这是 fiddle :http://jsfiddle.net/2ksxL/2/

Answer 1

您可以更改 #container {display: flex;}，但这在 IE (http://caniuse.com/flexbox) 中没有很好的支持。如果您需要更多支持，您将不得不提出一个 jQuery 解决方案，该解决方案可以找到容器的高度并将其提供给#child2。