Question

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

在一个页面上我<figure>重复，我希望他们的身高都一样。我被告知使用display: 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的变体。

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

1 个答案: