首页 > 代码库 > CSS3简单的栅格系统
CSS3简单的栅格系统
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>高仿栅格系统</title>
<!--栅格系统-->
<link rel="stylesheet" href="http://www.mamicode.com/css/small-grid.css">
<!---->
<link rel="stylesheet" href="http://www.mamicode.com/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%;
}
CSS3简单的栅格系统
声明：以上内容来自用户投稿及互联网公开渠道收集整理发布，本网站不拥有所有权，未作人工编辑处理，也不承担相关法律责任，若内容有误或涉及侵权可进行投诉： 投诉/举报 工作人员会在5个工作日内联系你，一经查实，本站将立刻删除涉嫌侵权内容。