Question

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

还是有另一种干净的方法可以根据最大的“细胞”将每个“行”中div的高度锁定在一起吗？

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

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

Answer 1

据我所知，你需要来自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

Answer 2

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

html table - by rows or columns

我不得不求助于使用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--;
}

行在列内时的表样式

2 个答案: