html布局:如何垂直浮动div

Question

如何让div垂直浮动,如下图所示:

背景:我有一个复选框网格,内容按字母顺序排序,我希望垂直排列字母顺序(因为水平顺序很难遵循).所有div都具有相同的大小(宽度如图片,高度= 1行大小).

更新:澄清:主要目的是根据可用的屏幕宽度建立一个具有可变列数的表格布局,并使单元格按列为主.div的实际数量事先不知道.

Answer 1

CSS

.cols {
        width:20%;
        float:left;
    }
    .rows {
        height:100px;
    }

HTML

 <div class="cols">
        <div class="rows">Div 1</div>
        <div class="rows">Div 2</div>
        <div class="rows">Div 3</div>
    </div>

    <div class="cols">
        <div class="rows">Div 4</div>
        <div class="rows">Div 5</div>
        <div class="rows">Div 6</div>
    </div>

    <div class="cols">
        <div class="rows">Div 7</div>
    </div>