html - 行在列内时的表格样式

Question

我想知道是否可以display:table对嵌套 div 使用 CSS 类型样式，其中行是列的子级。这是一个示例 jsfiddle：

http://jsfiddle.net/UrWEn/1/

或者是否有另一种干净的方法可以根据最大的“单元格”将每个“行”中 div 的高度锁定在一起？

出于各种原因，我想避免：

• 更改标记。
• 在行上设置固定高度。
• 使用 Javascript。

Answer 1

看起来答案是否定的。表格并非设计为首先使用列构建，因此没有处理这种布局的样式选项。

html 表格 - 按行或列

我不得不求助于使用 javascript 将每个“单元格”高度设置为其“行”中的最高值。对于我的应用程序来说，这是最不坏的选择。

http://jsfiddle.net/UrWEn/4/

var length = $('.column').eq(0).find('.cell').length, // number of rows
    $cells; 

while (length) {
    $cells = $('.cell:nth-child('+ length +')'); // all cells in row
    $cells.height(Math.max.apply(null, $cells.map(function() {
        return $(this).height();
    })));
    length--;
}

Answer 2

据我了解您的问题，您需要 div 中的表结构，因此请在 css 下面应用

div.column { 
    display : table-row;
    border:1px solid red;
    min-height:150px;
    vertical-align:top;
}
div.row { 
    border:1px solid green;
    width:100%;
    display:table-cell;
}

working DEMO