如何在多列中浮动div？没有“左，中，右”div标签

Question

我需要在多个列中列出这样的组。

我尝试过，但似乎无法使用float: left;。

我的结果就是这个。

问题是，我无法指定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>

Answer 1

这是一个简单的列布局：

column-count:3;

但是，只有IE10支持它。对于Firefox和Chrome：

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

Answer 2

我认为它可能对你有所帮助 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;
}

Answer 3

我脑海中唯一的解决方案是为所有块使用不同的类并使用clear: both;进行游戏，如果元素的位置偏移，则需要使用边距，否则您可以放弃浮动和使用位置