如何在 CSS 中创建一个横向的相册，代码是什么

发布时间：2023-10-25 12:49:02 所属栏目：语言来源：

导读：本篇内容介绍了“在CSS中如何制作横向相册，代码是什么”的有关知识，在实际项目的操作过程或是学习过程中，不少人都会遇到这样的问题，接下来就让小编带大家学习一下如何处理这些情况吧！希望大家仔细阅读

本篇内容介绍了“在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、图片比例不会被破坏

（编辑：汽车网）

【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容!