在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
.container {
display: flex;
justify-content: space-between;
}
.album {
display: flex;
flex-direction: column;
justify-content: space-between;
}
.album img {
width: 100%;
height: auto;
}