CSS - 让多个孩子成为最高的孩子的身高

问题描述:

如何让两个字段都成为最高的孩子的身高?下面的代码,这也可以通过使用jQuery在http://jsfiddle.net/zpcXQ/2/CSS - 让多个孩子成为最高的孩子的身高

<div id="parent"> 

    <form> 
    <fieldset id="left"> 
     <legend>Left</legend> 
     <p>line 1</p> 
     <p>line 2</p> 
     <p>line 3</p> 
    </fieldset> 

    <fieldset id="right"> 
     <legend>Right</legend> 
     <p>line 1</p> 
    </fieldset> 
    </form> 

</div> 

fieldset { 
    border: 1px solid green; 
    width: 48%; 
    position: relative; 
} 

#parent { 
    float: left; 
    width: 600px; 
    position: relative; 
} 

#left { 
    float: left; 
} 

#right { 
    float: left; 
} 
+2

可能DUP/questions/7855747/how-to-make-three-columns-the-same-height,http://stackoverflow.com/questions/2168573/same-height-of-columns-with-960-gs,more。我想人们会问这个问题是因为没有很好的,规范的解决方案。我喜欢人造的方法。 – 2012-03-30 19:57:15

为此,您可以看到如下:http://stackoverflow.com的

var fieldSets = $("fieldset").toArray(); 
var highest = 0; 
for(var i=0; i< fieldSets.length; i++){ 
    var tempHeight = $(fieldSets[i]).height(); 
    if(tempHeight > highest){ 
     highest = tempHeight; 
    } 
} 
$("fieldset").height(highest);