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、效果
作者:孟繁贵 Email:meng010387@126.com 期待共同进步!
【推荐】编程新体验,更懂你的AI,立即体验豆包MarsCode编程助手
【推荐】博客园携手 AI 驱动开发工具商 Chat2DB 推出联合终身会员
【推荐】抖音旗下AI助手豆包,你的智能百科全书,全免费不限次数
【推荐】轻量又高性能的 SSH 工具 IShell:AI 加持,快人一步
· .NET 依赖注入中的 Captive Dependency
· .NET Core 对象分配(Alloc)底层原理浅谈
· 聊一聊 C#异步 任务延续的三种底层玩法
· 敏捷开发:如何高效开每日站会
· 为什么 .NET8线程池 容易引发线程饥饿
· 终于决定:把自己家的能源管理系统开源了!
· 外部H5唤起常用小程序链接规则整理
· C#实现 Winform 程序在系统托盘显示图标 & 开机自启动
· 了解 ASP.NET Core 中的中间件
· 详解:订单履约系统规划