打赏

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、效果

 

posted @   孟繁贵  阅读(698)  评论(0编辑  收藏  举报
编辑推荐:
· .NET 依赖注入中的 Captive Dependency
· .NET Core 对象分配(Alloc)底层原理浅谈
· 聊一聊 C#异步 任务延续的三种底层玩法
· 敏捷开发:如何高效开每日站会
· 为什么 .NET8线程池 容易引发线程饥饿
阅读排行:
· 终于决定:把自己家的能源管理系统开源了!
· 外部H5唤起常用小程序链接规则整理
· C#实现 Winform 程序在系统托盘显示图标 & 开机自启动
· 了解 ASP.NET Core 中的中间件
· 详解:订单履约系统规划
TOP
点击右上角即可分享
微信分享提示