我正在开发一个新的 HTML 页面，我想使用无表布局。 请记住，下面的内容只是页面的一部分，但我认为它清楚地描绘了我正在尝试做的事情。
下面的 HTML 旨在渲染六个带有文本的单元格。 我希望单元格的大小适当以包含其中的文本。
我遇到的问题是边框绘制不正确。 在 IE 和 Firefox 中，我都看到两个问题：
1) 其中一个边框绘制在表格之外。
2）第一行单元格之间的边框绘制不完整。
<!DOCTYPE html>
<html>
<head>
<style>
html
{
}
.reviewRow
{
clear:both;
}
.reviewBlock
{
float:left;
border-top: 1px solid #444;
border-left: 1px solid #444;
}
.rightBorder
{
border-right: 1px solid #444;
}
.bottomBorder
{
border-bottom: 1px solid #444;
}
</style>
</head>
<body>
<div class='reviewRow'>
<div style="width:200px;" class='reviewBlock'>
THIS TEXT IS MUCH LONGER THAN THE TEXT IN THE OTHER CELLS
</div>
<div style="width: 225px" class='reviewBlock'>
ABC
</div>
<div style="width: 100px" class="reviewBlock rightBorder">
December 25, 2012
</div>
</div>
<div class='reviewRow bottomBorder'>
<div style="width:300px;" class='reviewBlock'>
Hello, World!
</div>
<div style="width: 125px" class='reviewBlock'>
123
</div>
<div style="width: 100px" class="reviewBlock rightBorder">
May 1, 2013
</div>
</div>
<div style='clear:both;'></div>
</body>
</html>
不要按照其他人所说的那样，不要使用表格进行布局，但是当涉及到表格数据时，如果您使用 div 来制作表格对我来说没有任何意义，只是不要使用表格设计布局，但您应该将其用于表格数据
如果你想用的话可以参考这个
请注意，除非您明确指定，否则 html 元素的高度是根据其中的内容计算的。
您的第二个 div 仅占据了显示 ABC 所需的高度，因此边框仅显示了那么多。要解决此问题，您必须为每个 div 指定一定的高度，以便它们按照您想要的方式显示。
如果您想以表格方式显示数据，只需使用表格即可。他们只是为了这个目的。显然，您可以设计它们以使它们看起来更好。
顺便说一句，要回答这个问题...您可以使用 display:table, table-cell 和 table-row（在 CSS3 中）
但我同意 Alien 先生的观点：只需使用表格来表示表格数据。
如果您尝试对表格数据执行此操作，那么请务必使用表格，这就是它的用途。不这样做就像尝试使用 Photoshop 制作电子表格，而 Excel 是更好的工具。
您可以使用
colspancolspan="1"rowspan