CSS實現一行顯示6個圖片需要使用以下代碼:
.container { display: flex; flex-wrap: wrap; justify-content: space-between; } img { width: 30%; margin-bottom: 20px; }
以上代碼解釋如下:
首先創建一個容器,定義其為flex布局,允許其以多行顯示(當圖片數量大于6個時,會自動換行)。同時使用justify-content屬性,將圖片之間的間距平均分配到容器的左右兩端。
其次,對每個圖片單獨定義寬度為30%,同時在下方留出20像素的空白,使圖片之間有一定的距離。
使用以上CSS代碼,即可實現在一行中顯示6個圖片的效果。