[分享]css中如何让两个相册一样高

在CSS中，如何让两个相册一样高？一般来说，在一个网页中，我们可能会需要展示多个图片相册。而这些图片相册往往都保存在不同大小的图片中，导致相册的高度不相同。这样一来，如果所有相册排列在同一水平线上，网...

在CSS中，如何让两个相册一样高？
一般来说，在一个网页中，我们可能会需要展示多个图片相册。而这些图片相册往往都保存在不同大小的图片中，导致相册的高度不相同。这样一来，如果所有相册排列在同一水平线上，网页就会显得非常难看。那么，如何让所有的相册高度一致呢？
这个问题其实并不难解决。我们只需要利用CSS中的flex布局即可。具体实现方式如下：
HTML代码：

html
<div class="container">
    <div class="album">
        <img src="img1.jpg">
        <img src="img2.jpg">
        <img src="img3.jpg">
    </div>
    <div class="album">
        <img src="img4.jpg">
        <img src="img5.jpg">
    </div>
</div> 

CSS代码：

css
.container {
    display: flex;
    justify-content: space-between;
}

.album {
    display: flex;
    flex-direction: column;
    justify-content: space-between;
}

.album img {
    width: 100%;
    height: auto;
} 

上面这段代码的作用是：先将外层的.container容器设置成flex布局，并且设置其justify-content属性值为space-between。这样一来，两个相册就会分别位于容器的两端，并且之间会有一定距离。
接着，我们再将每一个相册的容器.album也设置成flex布局，并且将其flex-direction属性值设置为column。这样一来，我们就将所有的照片竖直排列了起来。而且，按照默认值，它们之间的距离也会被自动设置。
最后，我们再将每一张图片设置成宽度百分之百，高度自适应就好了。这样，所有的相册就能够高度一致了，而且排列也非常整齐。