<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>高仿栅格系统</title> <!--栅格系统--> <link rel="stylesheet" href="css/small-grid.css"> <!----> <link rel="stylesheet" href="css/index.css"> </head> <body> <div class="main small-container"> <!--一列12个--> <div class="small-row"> <div class="col-1 have-border">A</div> <div class="col-1 have-border">A</div> <div class="col-1 have-border">A</div> <div class="col-1 have-border">A</div> <div class="col-1 have-border">A</div> <div class="col-1 have-border">A</div> <div class="col-1 have-border">A</div> <div class="col-1 have-border">A</div> <div class="col-1 have-border">A</div> <div class="col-1 have-border">A</div> <div class="col-1 have-border">A</div> <div class="col-1 have-border">A</div> </div> <div class="small-row"> <div class="col-1 have-border">A</div> <div class="col-11 have-border">B</div> </div> <!--一列6个--> <div class="small-row"> <div class="col-2 have-border">A</div> <div class="col-2 have-border">A</div> <div class="col-2 have-border">A</div> <div class="col-2 have-border">A</div> <div class="col-2 have-border">A</div> <div class="col-2 have-border">A</div> </div> <div class="small-row"> <div class="col-2 have-border">A</div> <div class="col-10 have-border">B</div> </div> <!--4个--> <div class="small-row"> <div class="col-3 have-border">A</div> <div class="col-3 have-border">A</div> <div class="col-3 have-border">A</div> <div class="col-3 have-border">A</div> </div> <div class="small-row"> <div class="col-3 have-border">A</div> <div class="col-9 have-border">B</div> </div> <!--3个--> <div class="small-row"> <div class="col-4 have-border">A</div> <div class="col-4 have-border">A</div> <div class="col-4 have-border">A</div> </div> <div class="small-row"> <div class="col-4 have-border">A</div> <div class="col-8 have-border">B</div> </div> <div class="small-row"> <div class="col-5 have-border">A</div> <div class="col-7 have-border">B</div> </div> <div class="small-row"> <div class="col-6 have-border">A</div> <div class="col-6 have-border">B</div> </div> </div> </body> </html>
*{ margin: 0; padding: 0; border: 0; list-style: none; box-sizing: border-box; } .small-container{ width: 100%; } .small-container,.small-row{ box-sizing: border-box; } .small-row::before, .small-row::after{ content: ‘‘; display: block; visibility: hidden; clear: both; zoom: 1; } [class*=‘col-‘]{ float: left; padding: 1%; } .col-1{ width: 8.33%; } .col-2{ width: 16.66%; } .col-3{ width: 25%; } .col-4{ width: 33.33%; } .col-5{ width: 41.66%; } .col-6{ width: 50%; } .col-7{ width: 58.33%; } .col-8{ width: 66.66%; } .col-9{ width: 75%; } .col-10{ width: 83.33%; } .col-11{ width: 91.66%; } .col-12{ width: 100%; }
时间: 2024-08-24 01:30:48