在網(wǎng)站開(kāi)發(fā)中，經(jīng)常會(huì)遇到需要將多個(gè)圖片并排展示的情況。這里我來(lái)介紹一下如何使用 CSS 來(lái)實(shí)現(xiàn)多個(gè)圖片的并列展示。

<style>
.image-group {
display: flex;
flex-wrap: wrap;
}
.image-group img {
width: 33.33%;
box-sizing: border-box;
padding: 5px;
}
</style>
<div class="image-group">
<img src="image1.jpg">
<img src="image2.jpg">
<img src="image3.jpg">
<img src="image4.jpg">
<img src="image5.jpg">
<img src="image6.jpg">
</div>

如上所示，我們使用了 flex 布局來(lái)實(shí)現(xiàn)多個(gè)圖片的自適應(yīng)并排展示。將多個(gè)圖片的父容器設(shè)置為 .image-group，然后將其設(shè)置為 flex 布局，并開(kāi)啟了換行：flex-wrap: wrap。這樣就可以讓多個(gè)圖片在同一行顯示，并自動(dòng)換行。

接著，我們?cè)O(shè)置了每個(gè)圖片的寬度為 33.33%（注意這里要使用百分比而不是像素），并使用 box-sizing: border-box; 來(lái)讓圖片的 padding 不會(huì)撐破父容器。最后，我們?yōu)槊總€(gè)圖片添加了 5px 的 padding，以美化展示效果。

使用以上代碼，就可以輕松實(shí)現(xiàn)多個(gè)圖片的并列展示。如果你有更好的實(shí)現(xiàn)方式，也歡迎分享哦！