CSS等比多列布局的方法

一、float + 百分比

        body,html,ul,li{
            padding: 0;
            margin: 0;
        }
        ul{
            list-style: none;
            overflow: hidden;
        }
        li{
            width: 30.6666%;
            height: 50px;
            margin: 0 2% 10px 0;
            float: left;
            /*margin-bottom: 10px;*/
            background: red;

        }
        li:nth-of-type(3n+1){
            margin-left: 2%;
        }

<body>
    <ul>
        <li></li>
        <li></li>
        <li></li>
        <li></li>
        <li></li>
        <li></li>
        <li></li>
        <li></li>
        <li></li>   
        <li></li>
        <li></li>
    </ul>
</body>

优点：
简单快速；宽度间距可控制。

缺点：
需要知道具体列数从而设置对应的百分比宽度和间距；脱离文档流需要清除浮动。

二、内联块元素(inline-block) + 百分比

        body,html,ul,li{
            padding: 0;
            margin: 0;
        }
        ul{
            list-style: none;   
            font-size: 0;       
        }
        li{
            width: 30.6666%;
            height: 50px;
            margin: 0 2% 10px 0;
            display: inline-block;
            background: red;

        }
        li:nth-of-type(3n+1){
            margin-left: 2%;
        }

优点：
传统方法，所有浏览器均支持，宽度间距可控制大小。

缺点：
需要对父级元素设置文字大小为0，否则会有误差，布局失效；需要知道具体列数。

三、flex + px

        body,html,ul,li{
            padding: 0;
            margin: 0;
        }
        ul{
            list-style: none;
            display: flex;
            align-items: center;
            justify-content: space-between;
            flex-wrap: wrap;
        }
        li{
            width: 200px;
            height: 50px;
            background: red;
            margin: 0 10px 20px 10px;

        }
        .empty{
            width: 200px;
            margin: 0 10px;
            height: 0;
        }


    <ul>
        <li></li>
        <li></li>
        <li></li>
        <li></li>
        <li></li>
        <li></li>
        <li></li>   
        <li class="empty"></li>
        <li class="empty"></li>
    </ul>

优点：
根据空元素的数目可动态支持最多n(空元素)+2个等比列数；不脱离文档流。

缺点：
页面宽度变化时，间距大小不可控。

四、flex + 百分比

        body,html,ul,li{
            padding: 0;
            margin: 0;
        }
        ul{
            list-style: none;
            display: flex;
            align-items: center;
            justify-content: space-between;
            flex-wrap: wrap;
        }
        li{
            width: 30%;
            height: 50px;
            background: red;
            margin: 0 0 10px 0;

        }

    <ul>
        <li></li>
        <li></li>
        <li></li>
        <li></li>
        <li></li>
        <li></li>
        <li></li>   
        <li></li>
        <li></li>
    </ul>

优点：
宽度间距可控制；根据元素总宽度，浏览器根据剩余宽度自动分配间距宽度；不脱离文档流，简单快速。 $\color{red}{推荐}$

缺点：
需要知道具体的列数从而设置宽度大小；低级浏览器需要做兼容。

总结
1、具体列数：使用flex+百分比、float+百分比和inline-block+百分比布局，针对目前大部分浏览器均支持flex情况，flex+百分比布局最优。
2、n列数：使用flex+px布局，空元素n(即高度为0)数目越多，支持的列数越多。

最后编辑于：2019.04.20 00:10:35

©著作权归作者所有,转载或内容合作请联系作者
【社区内容提示】社区部分内容疑似由AI辅助生成，浏览时请结合常识与多方信息审慎甄别。
平台声明：文章内容（如有图片或视频亦包括在内）由作者上传并发布，文章内容仅代表作者本人观点，简书系信息发布平台，仅提供信息存储服务。

CSS等比多列布局的方法