CSS中有時需要將一組圖片平均分布到容器中,可以使用以下方法來實現:
.container { display: flex; justify-content: space-between; } .container img { width: calc(100% / 圖片數量 - 邊距); /* 可以根據實際情況調整邊距的大小 */ }
上面的代碼中,我們使用了display: flex
和justify-content: space-between
屬性將所有的圖片均勻分布到容器中,每個圖片之間的間距相等。
其中calc(100% / 圖片數量 - 邊距)
用于計算每個圖片的寬度,前半部分計算出總寬度,再除以圖片數量獲得每個圖片的平均寬度,減去邊距則是每個圖片的實際寬度。
以上就是 CSS 中實現圖片平均分布的方法,可以根據實際情況調整寬度和邊距的大小,使得排版更加美觀。