Question

我试图通过使用float来安排3个divs：left，两个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;
 }

这里是小提琴：http://jsfiddle.net/2ksxL/2/

Answer 1

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

Answer 2

由于您尚未定义容器的任何高度，因此容器高度将取决于已定义到#childX的最大高度。在这种情况下，#child3。所以你可以做的是比较#chidl1和#child3的高度，并通过这个小jQuery将#child2的高度设置为最大值。

var highestCol = Math.max($('#child1').height(),$('#child3').height());
$('#child2').height(highestCol);

<强> FIDDLE

将3个div安排在一个容器中，另一个安装在自动高度上

2 个答案: