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

Question

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

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

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

Answer 1

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

Answer 2

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

Answer 3

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

您想要的基本上是网格布局系统。这有a CSS3 working draft，但自然它还没有实现。您可能希望查看网格布局系统，例如blueprint，yui-grids或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附加多个类，以针对特定情况，例如使一列更宽一些。