如何將div分成多列？沒有「左邊，中間，右邊」div標籤

enter image description here

我試過，但似乎不是float: left;工作。

我的結果就是這樣。

enter image description here

的問題是，我不能指定div像left或right，或center。

因爲組列表是從DB中檢索的。所以列表大小不一，列數也是。

這是我的測試源。

<style> 
#box { 
    height: 200px; 
    width: 230px; 
    background-color: yellow; 
} 

.group span { 
    font-weight: bold; 
} 

.group { 
    float: left; 
    width: 65px; 
    margin-right: 10px; 
    margin-bottom: 10px; 
    background-color: green; 
} 
</style> 

<div id="box"> 

    <div class="group"> 
     <span>group 1</span> 
     <li>item1</li> 
     <li>item2</li> 
     <li>item3</li> 
    </div> 

    <div class="group"> 
     <span>group 2</span> 
     <li>item3</li> 
    </div> 

    <div class="group"> 
     <span>group 3</span> 
     <li>item1</li> 
     <li>item2</li> 
     <li>item3</li> 
     <li>item2</li> 
     <li>item3</li> 
    </div> 

    <div class="group"> 
     <span>group 4</span> 
     <li>item10</li> 
    </div> 

    <div class="group"> 
     <span>group 5</span> 
     <li>item30</li> 
    </div> 

</div>

來源

2013-01-16 Deckard

這是一個簡單的列布局：

column-count:3;

然而，只有IE10支持單幹。對於Firefox和Chrome：

-moz-column-count:3; 
-webkit-column-count:3;

來源

2013-01-16 07:59:14

沒有機會IE7〜9和Safari？ – Deckard

Safari是Webkit，所以沒關係。但IE7-9不是，並且會顯示一個單一的寬列。也許你可以使用'float：left'，如果你現在顯示的方式對於不支持的瀏覽器足夠接受。 –

你可以改變HTML – Deckard

我認爲它可以幫助你 http://jsfiddle.net/qyQLu/

HTML代碼

<div id="box"> 
    <div class="newclass"> 
     <div class="group"> 
      <span>group 1</span> 
      <li>item1</li> 
      <li>item2</li> 
      <li>item3</li> 
     </div> 

     <div class="group"> 
      <span>group 2</span> 
      <li>item3</li> 
     </div> 
     </div> 
     <div class ="newclass"> 
     <div class="group"> 
      <span>group 3</span> 
      <li>item1</li> 
      <li>item2</li> 
      <li>item3</li> 
      <li>item2</li> 
      <li>item3</li> 
     </div> 
     </div> 
     <div class="newclass"> 
     <div class="group"> 
      <span>group 4</span> 
      <li>item10</li> 
     </div> 

     <div class="group"> 
      <span>group 5</span> 
      <li>item30</li> 
     </div> 
     </div> 
    </div>

CSS代碼

#box { 
    height: 200px; 
    width: 230px; 
    background-color: yellow; 
} 
.newclass 
{ 
    width:65px; 
    float:left; 
    padding-left:5px; 
} 

.group span { 
    font-weight: bold; 
} 

.group { 
    float: left; 
    width: 65px; 
    margin-right: 10px; 
    margin-bottom: 10px; 
    background-color: green; 
}

來源

2013-01-16 08:08:27 Nandu

好的答案，但我不能決定何時創建'.newclass'。因爲'.group'是從DB中檢索的。它用編程語言中的'loop'顯示（我的是JSP）。 – Deckard

附帶在我心中唯一的解決辦法對所有的區塊使用不同的等級並使用進行比賽，如果元素位置偏移需要使用餘量，否則可以放棄浮動並使用位置

來源

2013-01-16 08:24:54

如何將div分成多列？沒有「左邊，中間，右邊」div標籤

回答

相關問題