CSS实现相册横向完美排布方法

最近要做一个相册页面，碰到的第一个问题就是如何排布。本文我们将带大家来看一个关于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制作酷炫的三维相册效果示例

声明：本网页内容旨在传播知识，若有侵权等问题请及时与本网联系，我们将在第一时间删除处理。TEL:177 7030 7066 E-MAIL:11247931@qq.com