安排多个div如何最好地处理布局

Question

基本上，我想要做的是在主div中布置一些div来模拟表格。

唯一的区别是有时“列”需要根据“行”而不同。 所以我想弄清楚如何最好地定位div。 我应该漂浮div，abs位置等...

我只是想到了另一种方式。 我应该每行制作一个div，然后每个“列”一个跨度吗？

Answer 1

如果您只想输出少量数据，为什么不使用表？ 表格数据可以使用表格。

Answer 2

您可以继续为每列放置每行和每个跨度的div。 这将使排列成为不规则的表，行高是规则的，列宽是不规则的。

Answer 3

根据您的“栏”的内容使用span为贵“列”标记可能无法正常工作。 div是块级元素， span是内联元素。 内联元素不能包含块级元素。 从语义上讲，我建议不要使用span 。

您想要的基本上是网格布局系统。 有一个CSS3工作草案 ，但自然它还没有实现。 您可能希望查看网格布局系统，如blueprint ， yui- grid或960gs 。

Answer 4

我想说为了把div安排成你想要的表格：

让你的主div有CSS样式是这样的：

位置：绝对的;
顶：0像素;
左：0像素;

你左上角的单元格会有这样的样式：

位置：相对;
顶部：10px的;
左：10px的;
宽度：50像素;
高度：100像素;

这将使第一个单元格位于距离左上角10px的位置，其尺寸为50px宽，100px高。

接下来，您的右上角单元格将具有如下样式：

位置：相对;
顶部：10px的;
左：70像素;
宽度：50像素;
高度：100像素;

这将使顶部右侧单元格从顶部开始定位10px，从主分区左侧定位70px（距离左上角单元格的右边缘10px）。

您可以逻辑出后续单元格的位置。 确保您的top和left值考虑了主div顶部和左侧的总距离。

Answer 5

如果数据是表格数据（包括表格IMO），那么使用表格，这就是表格标签的用途，令人惊讶的是。

如果要创建列，则只需将它们浮动到左侧，并为单独的列添加填充或边距。 您可以为每个div附加多个类，以针对特定情况，例如使一列更宽一些。