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

问题描述:

我如何让这两个字段集合成为最高字段的高度?这里的代码也可以在 http://jsfiddle.net/zpcXQ/2/ 上看到

How do I make both of the fieldsets be the height of the tallest one? Here's the code, which can also be seen at http://jsfiddle.net/zpcXQ/2/

<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;
}


jquery如下:

You can do this by using jquery as following:

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);