CSS等比多列布局的方法

作者: vinterx | 来源:发表于2019-04-20 00:08 被阅读0次

CSS等比多列布局的方法
CSS二列&三列布局
DIV+CSS页面基本布局总结
CSS之浮动元素影响清除方法归纳
css常见布局（二）
前端面试题------float的原理及在平时工作中遇到的flo
Css float属性的一些特点
DIV+CSS对SEO网站优化好处有哪些？
CSS3多列布局
2020-06-12 面试

一、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}{推荐}$