html - 如何拉伸(stretch)垂直 div 元素以填充父容器？

Question

我有以下 JS Bin

<div class="container">
  <div class="column">
    <div class="cell">Top left</div>
    <div class="cell">Top left bottom</div>
  </div>
  <div class="column">
    <div class="cell">Center</div>
  </div>
  <div class="column">
    <div class="cell">Top right</div>
    <div class="cell">Top right bottom</div>
  </div>
</div>

如何使垂直对齐的 div 没有显式设置高度并将绝对位置设置为如下所示:

编辑:请不要建议我使用表格，因为我需要解决上面示例中的问题。

Answer 1

如何使用 CSS tables使用您当前的标记:

FIDDLE

CSS

.container {
    display: table;
}

.column {
    display: table-cell;
    vertical-align: top;
}

.cell {
    border: 1px solid #000;
    width: 100px;
    font-size: 13px;    
}
.column:nth-child(2)
{
    border: 1px solid #000;
}
.column:nth-child(2) .cell
{
    border: none;
}