Css 如何在多个列中浮动div？没有「；“左、中、右”；div标签

我需要在这样的多列中列出一些组

我试过了，但它似乎不适用于

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>


#盒子{
高度：200px；
宽度：230px；
背景颜色：黄色；
}
.组跨度{
字体大小：粗体；
}
.组{
浮动：左；
宽度：65px；
右边距：10px；
边缘底部：10px；
背景颜色：绿色；
}
第一组
项目1
项目2
项目3
第2组
项目3
第3组
项目1
项目2
项目3
项目2
项目3
第4组
项目10
第5组
项目30
这是一个简单的列布局：

column-count:3;

然而，只有IE10单独支持它。对于Firefox和Chrome：

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

我想这可能对你有帮助

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>

我想到的唯一解决方案是对所有的块使用不同的类，并使用
clear:both，如果元素的位置偏移，您需要使用边距，否则您可以放弃浮动并使用位置
没有机会IE7~9和Safari？Safari是Webkit，所以这很好。然而，IE7-9不是，并且将显示单个宽列。如果您当前的显示方式对于不支持的浏览器来说是可以接受的，也许您可以使用
float:left
。回答不错，但我无法决定何时创建
.newclass
。因为
.group
是从数据库中检索的。它用编程语言显示
循环
（我的是JSP）。
#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;
}