0

我正在开发一个新的 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>
4

4 回答 4

4

不要像其他人所说的那样，不要使用表格制作布局，但是当涉及到表格数据时，如果您使用 div 制作表格对我来说没有任何意义，请不要使用表格进行设计布局，但您应该将其用于表格数据

不过如果你想使用你可以参考这个

于 2012-12-12T15:09:44.627 回答
1

顺便说一句，回答这个问题...您可以使用display:table、table-cell 和 table-row（在 CSS3 中）

但我同意 Alien 先生的观点：只需将表格用于表格数据。

于 2012-12-12T15:15:42.750 回答
1

请参阅 html 元素的高度是根据其中的内容计算的，除非您明确指定它。

您的第二个 div 只占用了显示ABC所需的高度，因此边框只显示了那么多。要解决此问题，您必须为每个 div 指定一定的高度，以便它们按照您的意愿显示。

如果您尝试以表格方式显示数据，请使用表格。他们在那里只是为了那个目的。您显然可以设计它们以使它们更好看。

于 2012-12-12T15:16:31.447 回答
0

如果您尝试对表格数据执行此操作，那么一定要使用一个表，这就是它的用途。当 Excel 是更好的工具时，不这样做就像尝试使用 Photoshop 制作电子表格一样。

colspan您可以使用该属性更改单元格占用的列数。当然，默认情况下，一个单元格占用 1 列 ( colspan="1")，但如果您需要它占用更多，您只需更改数字即可。您可以对带有rowspan.

于 2012-12-12T15:19:36.460 回答