CSS制作网格的单元格，每个填充其行的100％的高度 [英] CSS to make a grid of cells that each fill 100% height of their row
本文介绍了CSS制作网格的单元格，每个填充其行的100％的高度的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！
问题描述
如示例上面，我想创建一个网格的框/单元格。我想让它看起来比屏幕截图更好，并且我想要每个单元格的底部向下延伸以与行中最高的单元格的底部对齐。我知道有大约一百万的帖子来解决100％的高度问题，但没有一个似乎在这种情况下工作。
要求：
- 没有背景图片 / li>
- 没有javascript
- 必须使用以下Doctype：
<！DOCTYPE html PUBLIC - // W3C // DTD XHTML + RDFa 1.0 // ENhttp://www.w3.org/MarkUp/DTD/xhtml-rdfa-1.dtd>（Drupal 7 ） - 但是，我对标记和CSS非常灵活，例如，添加额外的清晰div甚至用表重新做整个事情是很好的。
以下是我用来制作上述屏幕截图的代码：
HTML ：
< div class =row>
< div class =cell>这里是几个单元格的网格。我们希望每个单元格都向下延伸到该行的底部。< / div>
< div class =cell>此单元格太短。 < / div>
< / div>
< div class =row>
< div class =cell>此单元格应向下延伸到底部。< / div>
< div class =cell>我们不想使用背景图片或javascript。但是标记和CSS可以做，但是是最好的。每行应包含大小相等的单元格。< / div>
< / div>
CSS：
code> .row {
clear：both;
}
.cell {
background：#CCC;
border-radius：10px;
border：2px solid #AAA;
float：left;
margin：5px;
padding：5px;
width：200px;
}
解决方案
...
p>
HTML：
< table>< tbody&
< tr>
< td>这里是几个单元格的网格。我们希望每个单元格都向下延伸到该行的底部。< / td>
< td>此单元格太短。 < / td>
< / tr>
< tr>
< td>此单元格应向下延伸到底部。< / td>
< td>我们不想使用背景图片或javascript。但是标记和CSS可以做，但是是最好的。每一行应包含大小相等的单元格。< / td>
< / tr>
< / tbody>< / table>
CSS：
code> 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;
}
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.
Requirements:
- No background images
- No 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) - 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.
Here's the code I used to make the screenshot above:
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;
}
解决方案
Here's what did it for me...
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;
}
这篇关于CSS制作网格的单元格，每个填充其行的100％的高度的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
查看全文
