编者:张叶星
发布时间:2016-06-15 14:31:07
发布时间:2016-06-15 14:31:07
关键代码
width: 25%;padding-bottom: 25%;
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width,minimum-scale=1.0,maximum-scale=1.0,user-scalable=no">
<title>css实现正方形布局</title>
<style>
html,body{
margin: 0;
padding: 0;
}
.box{
text-align: center;
padding-right: 10px;
padding-bottom: 10px;
overflow: hidden;
}
.square{
display: block;
position: relative;
width: 25%;
padding-bottom: 25%;
float: left;
}
.square-content{
position: absolute;
left: 0;
top: 0;
right: 0;
bottom: 0;
padding: 10px 0px 0px 10px;
}
.square-content-body{
position: absolute;
left: 10px;
top: 10px;
right: 0px;
bottom: 0px;
color: #FFFF99;
}
.square-content-body span{
display: block;
padding-top: 10px;
font-size: 12px;
}
</style>
</head>
<body>
<div class="box">
<span class="square">
<div class="square-content">
<div class="square-content-body" style="background: #000000;"><span>我是正方形</span></div>
</div>
</span>
<span class="square">
<div class="square-content">
<div class="square-content-body" style="background: #CCCCCC;"><span>我是正方形</span></div>
</div>
</span>
<span class="square">
<div class="square-content">
<div class="square-content-body" style="background: #EEEEEE;"><span>我是正方形</span></div>
</div>
</span>
<span class="square">
<div class="square-content">
<div class="square-content-body" style="background: #EEEEFF;"><span>我是正方形</span></div>
</div>
</span>
<span class="square">
<div class="square-content">
<div class="square-content-body" style="background: #000000;"><span>我是正方形</span></div>
</div>
</span>
<span class="square">
<div class="square-content">
<div class="square-content-body" style="background: #CCCCCC;"><span>我是正方形</span></div>
</div>
</span>
<span class="square">
<div class="square-content">
<div class="square-content-body" style="background: #EEEEEE;"><span>我是正方形</span></div>
</div>
</span>
<span class="square">
<div class="square-content">
<div class="square-content-body" style="background: #EEEEFF;"><span>我是正方形</span></div>
</div>
</span>
<span class="square">
<div class="square-content">
<div class="square-content-body" style="background: #000000;"><span>我是正方形</span></div>
</div>
</span>
<span class="square">
<div class="square-content">
<div class="square-content-body" style="background: #CCCCCC;"><span>我是正方形</span></div>
</div>
</span>
<span class="square">
<div class="square-content">
<div class="square-content-body" style="background: #EEEEEE;"><span>我是正方形</span></div>
</div>
</span>
<span class="square">
<div class="square-content">
<div class="square-content-body" style="background: #EEEEFF;"><span>我是正方形</span></div>
</div>
</span>
<span class="square">
<div class="square-content">
<div class="square-content-body" style="background: #000000;"><span>我是正方形</span></div>
</div>
</span>
<span class="square">
<div class="square-content">
<div class="square-content-body" style="background: #CCCCCC;"><span>我是正方形</span></div>
</div>
</span>
<span class="square">
<div class="square-content">
<div class="square-content-body" style="background: #EEEEEE;"><span>我是正方形</span></div>
</div>
</span>
<span class="square">
<div class="square-content">
<div class="square-content-body" style="background: #EEEEFF;"><span>我是正方形</span></div>
</div>
</span>
<span class="square">
<div class="square-content">
<div class="square-content-body" style="background: #000000;"><span>我是正方形</span></div>
</div>
</span>
<span class="square">
<div class="square-content">
<div class="square-content-body" style="background: #CCCCCC;"><span>我是正方形</span></div>
</div>
</span>
<span class="square">
<div class="square-content">
<div class="square-content-body" style="background: #EEEEEE;"><span>我是正方形</span></div>
</div>
</span>
<span class="square">
<div class="square-content">
<div class="square-content-body" style="background: #EEEEFF;"><span>我是正方形</span></div>
</div>
</span>
<span class="square">
<div class="square-content">
<div class="square-content-body" style="background: #000000;"><span>我是正方形</span></div>
</div>
</span>
<span class="square">
<div class="square-content">
<div class="square-content-body" style="background: #CCCCCC;"><span>我是正方形</span></div>
</div>
</span>
<span class="square">
<div class="square-content">
<div class="square-content-body" style="background: #EEEEEE;"><span>我是正方形</span></div>
</div>
</span>
<span class="square">
<div class="square-content">
<div class="square-content-body" style="background: #EEEEFF;"><span>我是正方形</span></div>
</div>
</span>
<span class="square">
<div class="square-content">
<div class="square-content-body" style="background: #000000;"><span>我是正方形</span></div>
</div>
</span>
<span class="square">
<div class="square-content">
<div class="square-content-body" style="background: #CCCCCC;"><span>我是正方形</span></div>
</div>
</span>
<span class="square">
<div class="square-content">
<div class="square-content-body" style="background: #EEEEEE;"><span>我是正方形</span></div>
</div>
</span>
<span class="square">
<div class="square-content">
<div class="square-content-body" style="background: #EEEEFF;"><span>我是正方形</span></div>
</div>
</span>
<span class="square">
<div class="square-content">
<div class="square-content-body" style="background: #000000;"><span>我是正方形</span></div>
</div>
</span>
<span class="square">
<div class="square-content">
<div class="square-content-body" style="background: #CCCCCC;"><span>我是正方形</span></div>
</div>
</span>
<span class="square">
<div class="square-content">
<div class="square-content-body" style="background: #EEEEEE;"><span>我是正方形</span></div>
</div>
</span>
<span class="square">
<div class="square-content">
<div class="square-content-body" style="background: #EEEEFF;"><span>我是正方形</span></div>
</div>
</span>
</div>
</body>
</html>本文地址：
转载请著名出处，谢谢！
欢迎交流
QQ：419268793
编者:张叶星
发布时间:2016-06-15 14:31:07
发布时间:2016-06-15 14:31:07
本站的部分文章和图片来自互联网，特别鸣谢 “百度图片”、“笑话集 www.jokeji.cn ”等，
如果本站有某些文章或图片侵犯了您的权益，麻烦您告诉我，我会及时处理。谢谢！
QQ：419268793