css - 如何在多列中 float div？没有 "left, center, right"div 标签

Question

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

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

我的结果是这样的。

问题是，我无法指定 div，如 left 或 right，或 center。

因为组列表是从数据库中检索的。所以列表大小不同，列号也不同。

这是我的测试源。

<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;