html - 使用 display table-cell 将所有元素设置为相等高度

Question

所以我正在研究一些跨浏览器的兼容性（主要是让我的网站在 IE 中正确显示）。

在一页上我有<figure>重复，我希望它们的高度都相同。有人告诉我 usingdisplay: table-cell会这样做，所以我的标记如下所示：

<div class="table-container">
    <div id="projects">
        <figure>

        </figure>
        <figure>

        </figure>
        <figure>

        </figure>
    </div>
</div>

我的样式表（ie.css）如下所示：

html[data-page-id="code"] #code .table-container {
    display: table;
}
html[data-page-id="code"] #projects {
    width: 100%;
    overflow: hidden;
    display: table-row;
}
    html[data-page-id="code"] #projects figure {
        float: left;
        display: table-cell;
        width: 290px;
        background: #c1c1c1;
        padding: 10px;
        margin: 0 10px 30px 10px;
    }

列仍然不均衡，建议我使用它的人拒绝告诉我原因。

这是一个jsfiddle

Answer 1

float : left在这里没有帮助，因为浮动元素以display : block. 要display : table-cell正常工作，请删除浮动，然后将border-collapse : separate和添加border-spacing : 0 10px 30px 10px到display : table元素。

这是您的jsfiddle的变体。