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、图片比例不会被破坏

 

您可能感兴趣的文章：
CSS解决相册横向完美排布例子
CSS实现相册横向完美排布例子
H5横竖屏检测的方法
CSS Sprites图片不清晰的问题(2倍的 CSS Sprites 如何缩放)
css div 横向居中写法
CSS3中如何充分使用视窗单位来布局
photoshop设计美国队长英雄内战插画手绘步骤制作教程
DIV CSS网页布局对SEO优化有哪些影响
php 数组排序方法分享(冒泡排序、选择排序)
高度100%的绝对定位自适应布局