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

作者：袖梨 2022-06-25

很久没有研究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;
}