1、实现效果
高度、宽度相等的盒子，在不同的的分辨率下，显示可以容纳的最多盒子，超出的盒子自动在下一行对齐排列，盒子整体剧中对齐。
2、实现思路
（1）设置容器盒子剧中对齐。
（2）所有的内容盒子，高度和宽度设置相等，全部左浮动。
（3）利用@media，在不同的分辨率下，设置容器盒子的宽度。
（4）利用伪元素清除浮动的影响。
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>
网友评论