您的位置：首页 > 其它

自适应元素等间隙布局

2016-03-15 12:06 267 查看

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>定宽等间隙布局</title>
<style>
* {margin: 0;padding: 0;list-style: none}
div.container {width: 50%;margin: 20px auto}
p {font-size: 16px;color: rgba(222, 104, 15, 0.7);text-align: center}
.container ul {width: 100%}
.container ul:after {
display:inline-block;
overflow:hidden;
width:100%;
height:0;
content:'';
vertical-align:top;
}
.container ul li {display: inline-block;width: 25%;height: auto;position: relative;float: left}
.container ul li img {display: block;width: 100%}
.container ul li span {display: block;width: 100px;height: 100px;background: aquamarine;position: absolute;left: 0;top: 0;right: 0;bottom: 0;margin: auto}
.main {width: 50%;margin: 0 auto}
.main ul {width: 100%}
.main ul li {width: 25%;display: inline-block;float: left;position: relative;padding-top: 25%}
.main ul li span {display: block;width: 100px;height: 100px;background: aquamarine;position: absolute;left: 0;top: 0;right: 0;bottom: 0;margin: auto}
</style>
</head>
<body>
<p>这种实现方式，有点繁琐，添加无意义的图片，具体实现思路相当于设置一个正方形，但是不能将宽高写死</p>
<div class="container">
<ul>
<li>
<img src="images/back.png" alt=""/>
<span></span>
</li>
<li>
<img src="images/back.png" alt=""/>
<span></span>
</li>
<li>
<img src="images/back.png" alt=""/>
<span></span>
</li>
<li>
<img src="images/back.png" alt=""/>
<span></span>
</li>
<li>
<img src="images/back.png" alt=""/>
<span></span>
</li>
</ul>
</div>
<p>这种也是问了别人。利用padding，因为padding的百分比是基于祖先元素。</p>
<div class="main">
<ul>
<li><span></span></li>
<li><span></span></li>
<li><span></span></li>
<li><span></span></li>
<li><span></span></li>
</ul>
</div>
<p style="margin-top: 280px">如果其他大神有更好的方法，欢迎指导，我只是一只前端菜青虫，在破茧成蝶的道路上。。。。</p>
</body>
</html>

内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理

标签：

相关文章推荐

新的分享

章节导航