Question

所以我在JSFiddle中创建了一个类似于表格，行和单元格的例子但是我试图制作这样的列，所以列都是相同的高度，但是从白色背景可以看出这一栏并没有真正奏效。

我想避免使用JS解决方案，并且知道它在CSS中的可能性，但我认为我只是遗漏了一些东西。

JSFIDDLE：https://jsfiddle.net/6swpqhuf/1/

CSS：

body {
    background: black;
}
div.table {
    display: table;
}
div.row {
    display: table-row;
    clear: both;
}
div.col {
    display: table-cell;
    background: white;
    width: 30%;
    float: left;
    margin: 0 20px 20px 0;
}

Answer 1

继续发表评论。正如您在代码中看到的，float: left;为什么会出现在这里？ display: table-cell;已经将它们放在同一行中。

只需删除它即可修复您的布局。

div.col {
    display: table-cell;
    background: white;
    width: 30%;
    margin: 0 20px 20px 0;
}

DEMO

使用CSS在线等高柱高度

1 个答案: