问

html布局:如何垂直浮动div

旭峰fd_817 发布于 2023-02-10 10:39

图片

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

在此输入图像描述

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

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

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>

2023-02-10 10:41 回答

风过无痕啦啦

撰写答案

今天，你开发时遇到什么问题呢？

立即提问

热门标签