css布局三栏自动换行

1、代码实现

<!DOCTYPE html>
<html lang="zh">
    <head>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <meta http-equiv="X-UA-Compatible" content="ie=edge">
        <title>css布局 三栏 自动换行</title>
        <style type="text/css">
            * {
                margin: 0;
                padding: 0;
            }

            .pp {
                width: 100%;
                overflow: hidden;
            }

            .c {
                float: left;
                width: 200px;
                border: 1px solid darkred;
                box-sizing: border-box;
            }

            .c+.c {
                /* 计算方式 (100%-200*3)/2 */
                margin-left: calc(50% - 300px);
            }

            /* 特殊处理 */
            .c:nth-of-type(3n+1) {
                margin-left: 0;
            }
        </style>
    </head>
    <body>
        <div class="pp">
            <div class="c">
                123
            </div>
            <div class="c">
                123
            </div>
            <div class="c">
                123
            </div>
            <div class="c">
                123
            </div>
            <div class="c">
                123
            </div>
            <div class="c">
                123
            </div>
            <div class="c">
                123
            </div>
            <div class="c">
                123
            </div>
        </div>
        <script type="text/javascript">
        </script>
    </body>
</html>

2、效果

相关阅读:
docker安装部署命令
kubernetes原理
kubernetes安装部署
Ansible安装
模拟红绿灯（递归与队列）
数据结构——顺序表
数据结构——基本概念
C语言高级编程
Shell编程
Shell命令

原文地址：https://www.cnblogs.com/mengfangui/p/10481236.html

css布局 三栏 自动换行

css布局三栏自动换行