Question

There’s the groups I need to list in multiple columns like this.

I tried but it seems not working with float: left;.

My result is this.

The problem is, I can’t specify div like left or right, or center.

Because the group list is retrieved from DB. So the list size varies, and the column numbers too.

Here’s my test source.

<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

It’s a simple column layout:

column-count:3;

However, only IE10 supports it alone. For Firefox and Chrome:

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