gpt4 book ai didi

html - 如何使用 CSS 正确使用带边框的无表格布局?

转载 作者:太空宇宙 更新时间:2023-11-03 20:19:19 25 4
gpt4 key购买 nike

我正在制作一个新的 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 来制作表格对我来说没有任何意义,那就不要使用用于设计布局的表格,但您应该将其用于表格数据

还是要用的话可以引用this

关于html - 如何使用 CSS 正确使用带边框的无表格布局?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/13842549/

25 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com