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