本文介绍了CSS 制作一个单元格网格，每个单元格填充 100% 的行高的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着跟版网的小编来一起学习吧！
问题描述
如上例所示，我正在尝试创建一个框/单元格网格.我希望它看起来比屏幕截图更好，并且我希望每个单元格的底部向下延伸以与行中最高单元格的底部对齐.我知道大约有数百万个帖子可以解决 100% 的身高问题，但似乎没有一个适用于这种情况.
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.
要求:
- 无背景图片
- 没有 javascript
- 必须使用以下 Doctype:
(Drupal 7) - 但是，我在标记和 CSS 方面非常灵活，例如，我可以添加额外清晰的 div 甚至用表格重新做整个事情.
- 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% 的行高的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持跟版网！
The End
大气响应式网络建站服务公司织梦模板
高端大气html5设计公司网站源码
织梦dede网页模板下载素材销售下载站平台（带会员中心带筛选）
财税代理公司注册代理记账网站织梦模板（带手机端）
成人高考自考在职研究生教育机构网站源码(带手机端)
高端HTML5响应式企业集团通用类网站织梦模板(自适应手机端)