在網(wǎng)頁中,有時需要對一些圖片進行排版,使它們放在同一行且每行最多只顯示兩個圖片。這就需要使用CSS對圖片進行樣式設置。
首先,在HTML文件中使用p標簽來構建圖片所在的段落,并在段落中添加圖片標簽,例如:
然后,在CSS文件中,為圖片所在的段落添加以下樣式:
.image-wrapper { display: flex; flex-wrap: wrap; justify-content: space-between; } .image-wrapper img { width: 48%; margin-bottom: 20px; }上述代碼中,使用了flex布局,將圖片排列在同一行中,并使用flex-wrap屬性設置當圖片數(shù)量超出一行時自動換行。同時使用justify-content屬性設置兩邊的對齊方式為“兩端對齊”。而為圖片設置width屬性的值為“48%”,則使其可以在一行中放置兩張圖片。 通過這樣的設置,可以實現(xiàn)讓圖片一行兩個的效果,同時也可根據(jù)需要進行更改,使其適應不同的網(wǎng)頁設計需求。