CSS制作一个单元格网格，每个单元格填充其行的100％高度

Question

屏幕截图示例

As shown in the example above, I'm trying to create a grid of boxes/cells. 如上面的示例所示，我试图创建一个由盒子/单元格组成的网格。 I want it to look nicer than the screenshot, and I want the bottom of each cell extend down to align with the bottom of the tallest cell in the row. 我希望它看起来比屏幕截图更好，并且我希望每个单元格的底部向下延伸以与该行中最高的单元格的底部对齐。 I know there are about a millions posts to solve 100% height problems but none of them seem to work for this case. 我知道大约有数百万个帖子可以解决100％的身高问题，但是似乎没有一个适合这种情况。

Requirements: 要求：

No background images 无背景图片
No javascript 没有JavaScript
Must work with the following Doctype: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML+RDFa 1.0//EN" "http://www.w3.org/MarkUp/DTD/xhtml-rdfa-1.dtd"> (Drupal 7) 必须使用以下Doctype： <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML+RDFa 1.0//EN" "http://www.w3.org/MarkUp/DTD/xhtml-rdfa-1.dtd"> （Drupal 7）
But, I'm very flexible with the markup and CSS, for example, I'm fine with adding extra clear divs or even re-doing the whole thing with tables. 但是，我对标记和CSS非常灵活，例如，我可以添加额外的清晰div甚至用表重新做一遍。

Here's the code I used to make the screenshot above: 这是我用来制作上述屏幕截图的代码：

HTML: 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: CSS：

.row {
  clear: both;
}

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

Answer 1

You could perfectly achieve this with display:table-row and display:table-cell (unless you need to support IE7 and lower): 您可以使用display:table-row和display:table-cell完美实现此目的（除非您需要支持IE7及更低版本）：

http://jsfiddle.net/ptriek/nFeCw/ 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

Here's what did it for me... 这是为我做的...

在此处输入图片说明

HTML: 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: 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;
}

CSS制作一个单元格网格，每个单元格填充其行的100％高度

问题描述

2 个解决方案

解决方案1
3 2011-12-29 19:17:35

解决方案2
2 已采纳 2011-12-30 19:41:58

CSS制作一个单元格网格，每个单元格填充其行的100％高度

问题描述

2 个解决方案

解决方案1 3 2011-12-29 19:17:35

解决方案2 2 已采纳 2011-12-30 19:41:58

解决方案1
3 2011-12-29 19:17:35

解决方案2
2 已采纳 2011-12-30 19:41:58