2

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

我有一个使用多个有效表的解决方案。本质上，每一行都是一个新表。这在大多数情况下都有效。

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

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

[每行]
  [div 样式 =“浮动：无”]
  [每列]
    [div 样式 =“浮动：左”]
      [内容]
    [/div]
[/div]
[br]

但一切都是相互重叠的。

我也尝试过使用“位置：相对”，但事情看起来更加无聊。

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

4

2 回答 2

2

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

#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 即可在正确的行/列中获取内容。

于 2010-04-12T01:16:03.123 回答
0

960 Grid System 就是为了完成这样的事情而设计的。看看http://960.gs/他们有很多例子说明你可以用 960 做什么。

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

于 2010-04-12T01:14:23.107 回答