Question

我想要显示一堆项目（文字，图像，混合内容等）。用户可以定义该项出现的行和列。例如，在行1中，可以有两个项目/列，两个图像。在第二行中，可能有三个项目/列，一个带有图像，另外两个带有纯文本。哦，用户可以指定任何特定列/图像/项目的宽度。

我有一个使用多个表的解决方案。实质上，每一行都是一个新表。这大部分都有效。

我想知道我是否可以使用div？

现在我的CSS foo缺乏，我试图从网上复制示例，但我无法让它工作。现在我有这样的事情：

[for each row]
  [div style="float: none"]
  [for each column]
    [div style="float: left"]
      [content]
    [/div]
[/div]
[br]

但是一切都相互重叠。

我也试过使用“位置：亲戚”，但事情看起来更加沉闷。

那么div实际上可以用于多行和不同数量的列吗？

Answer 1

他们肯定可以！您正在寻找的基本效果（听起来像）是这样的：

#wrapper {
    width: 900px;
}
    
.item {
    height: 200px;
    width: 200px;
    margin: 10px;
    float: left;
}

<div id="wrapper">
    <div class="item">Something</div>
    <div class="item">Something else</div>
    <div class="item">Something cool</div>
    <div class="item">Something sweet</div>
    <div class="item">Something just ok</div>
</div>

那么这样做是设置一个固定宽度的容器（#wrapper）并用“块”填充它。因为每个都有一个固定的宽度并且向左浮动，它们将在网格中排成一行。由于我为每个设置的宽度/边距，你应该每行4。如果您需要垫片，只需放入空白DIV即可获得右侧行/列的内容。

Answer 2

960网格系统旨在完成这样的事情。看看http://960.gs/他们有很多关于你可以用960做什么的例子。

对于未受教育的人，它定义了两种类型的布局：12列或16列。每列都是预定义的宽度，它们之间有预定义的排水沟。然后，您可以使用内置的css样式使div跨越任意数量的列。对于使用不同布局的页面不同部分的布局，它非常强大。

CSS多个多列div

2 个答案: