<link rel="stylesheet" href="css/style.css" media="screen" type="text/css" />
</head>
<body>
<div class="row">
<div class="grid m-grid-1 d-grid-1">
</div>
<div class="grid m-grid-1 d-grid-1">
</div>
<div class="grid m-grid-1 d-grid-1">
</div>
<div class="grid m-grid-1 d-grid-1">
</div>
<div class="grid m-grid-1 d-grid-1">
</div>
<div class="grid m-grid-1 d-grid-1">
</div>
<div class="grid m-grid-1 d-grid-1">
</div>
<div class="grid m-grid-1 d-grid-1">
</div>
</div>
</body>
</html>
CSS代码如下：
CSS Code复制内容到剪贴板
.row{
width:100%;
max-width:1024px; /*设置最大的宽度，一般为PC端才起作用*/
margin:0 auto;
outline: 1px solid blue;
}
/*为row类清除浮动来防止由浮动元素造成的外边距折叠*/
.row:before,.row:after {content: " ";display: table;}
.row:after {clear: both;}
/*设置每一列的格式*/
.grid{
height:20px;
float:left;
margin:1%;
outline:1px solid red;
}
/*设置每一个移动设备上m-grid-1类的宽度值，m-grid-2类为m-grid-1的两倍，以此类推*/
.m-grid-1{width:23%;}
.m-grid-2{width:48%;}
.m-grid-3{width:73%;}
.m-grid-4{width:98%;}
/*为宽度大于或等于960px的设备设置列的宽度*/
@media (min-width:960px){
.d-grid-1{width:10.5%;}
.d-grid-2{width:23%;}
