首页 / CSS / CSS实现相册横向完美排布方法
CSS实现相册横向完美排布方法
内容导读
互联网集市收集整理的这篇技术教程文章主要介绍了CSS实现相册横向完美排布方法，小编现在分享给大家，供广大互联网技能从业者学习和参考。文章包含1690字，纯文字阅读大概需要3分钟。
内容图文
最近要做一个相册页面，碰到的第一个问题就是如何排布。本文我们将带大家来看一个关于CSS解决相册横向完美排布例子的，希望这个例子能够为各位同学带来帮助了，有兴趣的一起来看看吧。
分析一下，有一个容器，容器有padding，每一行的每一个item之间又有margin，首先想到的是这样
<pre class="brush:css;toolbar:false">.container
{ padding: 10px;
}
.container .item
{ float: left; width: 24%; margin-left: 1%; border: 1px solid #CCC;
}
</pre>然而，这种情况会造成两个问题，首先第一个是第一个item自身的margin-left加上.container的padding会造成左边空白比上下左右都要大，还会造成item与item之间的垂直间距与水平间距不能控制到一样的大小。
于是考虑到使用calc属性
<pre class="brush:css;toolbar:false">.
container { padding: 5px; }
.container .item
{ width: 25%; position: relative; float: left; }
/* 这个图片仅仅是为了获取宽高，实际是看不见的 */ .container .item >
img { opacity: 0; width: 100%; }
/* 这个才是每一个item里容器 .container .item .body
{ border: 1px solid #CCC; width: calc(100% - 10px);
height: calc(100% - 10px);
margin: auto;
left: 0;
top: 0;
bottom: 0;
right: 0;
}
</pre>以上代码如果要是用sass来实现的话，更容易了，这种实现方法相当于实际上每一个item占用的大小就是25%，只是里面的body都上下左右都有5px的边距。item与item之间的边距实际上就是每一个item的右间距加上右边item的左边距，每一个item的下边距加上它下方item的上边距。
这种实现方法有几个好处：
1、上下左右都是一样的边距
2、纯样式
3、图片比例不会被破坏
相关推荐：
关于相册效果的10篇文章推荐
今日推荐：十款超好用的JS相册特效
CSS3制作酷炫的三维相册效果示例
以上就是CSS实现相册横向完美排布方法的详细内容，更多请关注Gxl网其它相关文章！
内容总结
以上是互联网集市为您收集整理的CSS实现相册横向完美排布方法全部内容，希望文章能够帮你解决CSS实现相册横向完美排布方法所遇到的程序开发问题。 如果觉得互联网集市技术教程内容还不错，欢迎将互联网集市网站推荐给程序员好友。
内容备注
版权声明：本文内容由互联网用户自发贡献，该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容， 请发送邮件至 gblab@vip.qq.com 举报，一经查实，本站将立刻删除。
内容手机端
扫描二维码推送至手机访问。