如何将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标签

回答

相关问题