CSS多个多列div

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

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

我想知道如果我可以只使用div？

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

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

但是一切都互相重叠。

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

因此，div可以用于多行和不同列数吗？

来源

2010-04-12 accelerate

他们肯定可以！基本的效果（这听起来像）你要找的是像这样：

#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-12 01:16:03

在'.item'中使用“overflow：hidden'”可能会付出代价，因为如果IE6中的内容大于容器，IE6并不总是遵守宽度声明（IE7/8我认为它更符合要求） – cryo 2010-04-12 02:10:49

如果使用while或for循环从数据库重复数据，请确保不要在div下面添加
元素。 – clientbucket 2011-06-03 23:32:33

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

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

来源

2010-04-12 01:14:23 vfilby

CSS多个多列div

回答

相关问题