具有相同高度的浮动字段集

Question

我有这段代码：

<div id="container">
 <fieldset class="box">
  <legend>Title</legend>
   CONTENT
  </fieldset>
  <fieldset class="box">
  [etc...]
  </fieldset>
</div>

我希望这些字段集具有相同的高度并浮动。

因此，我已使用display:table设置容器，并使用display:table-cell设置每个字段集，但是，如果我使用float:left浮动每个框（字段集），display:table-cell不再工作了。

这应该是结果：

有什么建议吗？

Answer 1

使用简单的jQuery代码，您可以实现相等的列高

DEMO

<强> HTML

<div id="container">
    <fieldset class="box">
        <legend>Title</legend>CONTENT
        <br/>test</fieldset>
    <fieldset class="box">
        <legend>Title</legend>CONTENT</fieldset>
    <fieldset class="box">
        <legend>Title</legend>CONTENT</fieldset>
</div>

<强> CSS

.box {        
    float:left;
    width:25%;
}

<强>的jQuery

$(function () {
    var H = 0;
    $("div").each(function (i) {
        var h = $(".box").eq(i).height();
        if (h > H) H = h;
    });
    $(".box").height(H);
});

Answer 2

好的我会创建一个答案。简而言之，display: table-cell不能与fieldset一起使用。了解更多in this question

你可以使用div并稍微改变一下。或者只是将它们用作每个容器。

但我建议您使用display: inline-block。

DEMO HERE

HTML：

<div id="container">
    <fieldset class="box">
        <legend>Title</legend>CONTENT</fieldset>
    <fieldset class="box">
        <legend>Title</legend>CONTENT</fieldset>
    <fieldset class="box">
        <legend>Title</legend>CONTENT</fieldset>
</div>

CSS：

.box {
    width: 200px;
    height: 200px;
    display: inline-block;
}

---

这就是为什么你可以在它们周围创建容器以便能够使用display: table;等。

HTML：

<div id="container">
    <div class="innercon">
        <fieldset class="box">
            <legend>Title</legend>CONTENT</fieldset>
    </div>
    <div class="innercon">
        <fieldset class="box">
            <legend>Title</legend>CONTENT</fieldset>
    </div>
    <div class="innercon">
        <fieldset class="box">
            <legend>Title</legend>CONTENT</fieldset>
    </div>
</div>

CSS：

#container {
    display: table;
}
.innercon {
    display: table-cell;
}

.box {
    width: 200px;
    height: 200px;
}

DEMO HERE