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

【问题标题】：Floating fieldset with same height具有相同高度的浮动字段集
【发布时间】：2014-04-10 17:22:01
【问题描述】：

我有这个代码：

<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 就不再起作用了。

这应该是结果：

有什么建议吗？

【问题讨论】：

你为什么要float一个表格单元格？使用display: inline-block。 DEMO HERE
对不起什么？我写了正确的答案，你把它给别人？你在哪里说过在你的问题中使用jQuery。您将其标记为 HTML 和 CSS。下次让您的问题更清楚地了解我们可以用来解决问题的工具。甚至连 +1 都没有，psh！

标签： html css

【解决方案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);
});

【讨论】：

只是为了让你知道，没有理由在那里有display: table-cell。

【解决方案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

【讨论】：