css - 如何在多列中浮动div？没有“左、中、右”的 div 标签

Question

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

我试过了，但它似乎不适用于float: left;.

我的结果是这样的。

问题是，我不能指定divlike leftor right, or 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;

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;，如果元素的位置偏移你需要使用边距，否则你可以放弃浮动并使用位置