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

回答

相關問題