Jquery中文网 www.jquerycn.cn
Jquery中文网 >  CSS教程  >  经典实例  >  正文 CSS实现相册横向完美排布例子

CSS实现相册横向完美排布例子

发布时间:2020-05-07   编辑:www.jquerycn.cn
jquery中文网为您提供CSS实现相册横向完美排布例子等资源,欢迎您收藏本站,我们将为您提供最新的CSS实现相册横向完美排布例子资源
CSS实现相册横向布局我们只需要设置float然后固定宽度就可以了,下面我们就一起来看一个关于CSS实现相册横向完美排布的例子

很久没有研究css了,成天用各种框架也基本都不需要自己写,最近要做一个相册页面,碰到的第一个问题就是如何排布。

先给出设计稿,然后再说说样式如何写

分析一下,有一个容器,容器有padding,每一行的每一个item之间又有margin,首先想到的是这样

.container {
    padding: 10px;
}
 
.container .item {
    float: left;
    width: 24%;
    margin-left: 1%;
    border: 1px solid #CCC;
}

然而,这种情况会造成两个问题,首先第一个是第一个item自身的margin-left加上.container的padding会造成左边空白比上下左右都要大,还会造成item与item之间的垂直间距与水平间距不能控制到一样的大小。
于是考虑到使用calc属性


.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;
}

以上代码如果要是用sass来实现的话,更容易了,这种实现方法相当于实际上每一个item占用的大小就是25%,只是里面的body都上下左右都有5px的边距。item与item之间的边距实际上就是每一个item的右间距加上右边item的左边距,每一个item的下边距加上它下方item的上边距。

这种实现方法有几个好处:

1、上下左右都是一样的边距
2、纯样式
3、图片比例不会被破坏

您可能感兴趣的文章:
CSS实现相册横向完美排布例子
CSS解决相册横向完美排布例子
H5横竖屏检测的方法
php 数组排序方法分享(冒泡排序、选择排序)
高度100%的绝对定位自适应布局
css 容器高度100%及相对高宽
分享几个超级震憾的图片特效
DIV CSS网页布局对SEO优化有哪些影响
CSS Sprites图片不清晰的问题(2倍的 CSS Sprites 如何缩放)
css中文字图片背景图居中的方法汇总

[关闭]