CSS 创建一个单元格网格，每个单元格填充其行的 100% 高度

Question

如上面的示例所示，我正在尝试创建一个框/单元格网格。我希望它看起来比屏幕截图更好，并且我希望每个单元格的底部向下延伸以与行中最高单元格的底部对齐。我知道大约有数百万个帖子可以解决 100% 高度问题，但似乎没有一个适用于这种情况。

要求：

• 无背景图像
• 无 javascript
• 必须使用以下 Doctype： (Drupal 7)
• 但是，我非常灵活例如，标记和 CSS，我可以添加额外的清晰 div，甚至用表格重新完成整个事情。

这是我用来制作上面屏幕截图的代码：

HTML：

<div class="row">
  <div class="cell">Here is a grid of several cells. We want each cell to extend down to the bottom of the row.</div>
  <div class="cell">This cell it too short. </div>
</div>
<div class="row">
  <div class="cell">This cell should extend down to the bottom.</div>
  <div class="cell">We don't want to use background images or javascript. But the markup and CSS can be made however is best. Each row should contain cells of equal size.</div>
</div>

CSS：

.row {
  clear: both;
}

.cell {
  background: #CCC;
  border-radius: 10px;
  border: 2px solid #AAA;
  float: left;
  margin: 5px;
  padding: 5px;
  width: 200px;
}

Answer 1

您可以使用 display:table-row 和 display:table-cell 完美实现此目的（除非您需要支持 IE7 及更低版本）：

http://jsfiddle.net/ptriek/nFeCw/

.row {
    display:table-row;
}

.cell {
  background: #CCC;
  border-radius: 10px;
  border: 2px solid #AAA;
  display:table-cell;
  margin: 5px;
  padding: 5px;
  width: 200px;
}

Answer 2

这就是为我做的...

HTML:

<table><tbody>
  <tr>
    <td>Here is a grid of several cells. We want each cell to extend down to the bottom of the row.</td>
    <td>This cell it too short. </td>
  </tr>
  <tr>
    <td>This cell should extend down to the bottom.</td>
    <td>We don't want to use background images or javascript. But the markup and CSS can be made however is best. Each row should contain cells of equal size.</td>
  </tr>
</tbody></table>

CSS:

table {
  border-spacing: 10px;
  margin: -10px;
  border-collapse: separate;
}

td {
  background: #CCC;
  vertical-align: top;
  border-radius: 10px;
  border: 2px solid #AAA;
  display: table-cell;
  padding: 5px;
  width: 200px;
}