1逻卖、實(shí)現(xiàn)效果
??高度、寬度相等的盒子昭抒，在不同的的分辨率下评也，顯示可以容納的最多盒子，超出的盒子自動(dòng)在下一行對(duì)齊排列灭返，盒子整體劇中對(duì)齊仇参。
2、實(shí)現(xiàn)思路
（1）設(shè)置容器盒子劇中對(duì)齊婆殿。
（2）所有的內(nèi)容盒子诈乒，高度和寬度設(shè)置相等，全部左浮動(dòng)婆芦。
（3）利用@media怕磨，在不同的分辨率下，設(shè)置容器盒子的寬度消约。
（4）利用偽元素清除浮動(dòng)的影響肠鲫。
3、源代碼
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style type="text/css">
body{
margin: 0px;
}
.box{
width: 288px;
height: 288px;
border: 1px solid #eee;
margin: 5px;
float: left;
}
.center{
margin-left: auto;
margin-right: auto;
}
.center:after{
content: 'clear';
display: block;
clear :both;
overflow: hidden;
visibility: hidden;
}
@media screen and (min-width: 1200px) {
.center{
width: 1200px;
}
}
@media screen and (min-width: 900px) and (max-width: 1199px) {
.center{
width: 900px;
}
}
@media screen and (min-width: 600px) and (max-width: 899px) {
.center{
width: 600px;
}
}
@media screen and (max-width: 599px) {
.center{
width: 300px;
}
}
.footer{
background: black;
height: 60px;
color: #fff;
}
.header{
background: blue;
height: 60px;
color: #fff;
}
</style>
</head>
<body>
<div class="header">header</div>
<div class="center">
<div class="box">1</div>
<div class="box">2</div>
<div class="box">3</div>
<div class="box">4</div>
<div class="box">5</div>
<div class="box">6</div>
<div class="box">7</div>
<div class="box">8</div>
<div class="box">9</div>
<div class="box">10</div>
<div class="box">11</div>
<div class="box">12</div>
</div>
<div class="footer">footer</div>
</body>
</html>
