CSS中有很多方法來實現圖片并排,下面介紹其中一種方法。
<style> .picture { display: flex; flex-wrap: wrap; justify-content: center; align-items: center; } .picture img { margin-right: 20px; margin-bottom: 20px; } .picture p { margin: 0; } </style>
首先,我們需要定義一個容器,里面包含要顯示的圖片和文字。
<div class="picture"> <img src="image1.jpg"> <p>圖片1描述文字</p> <img src="image2.jpg"> <p>圖片2描述文字</p> <img src="image3.jpg"> <p>圖片3描述文字</p> </div>
接下來,我們使用CSS的flex布局來實現圖片并排。
.picture { display: flex; flex-wrap: wrap; justify-content: center; align-items: center; }
上述代碼中,display: flex表示將容器設置為彈性布局,flex-wrap: wrap表示容器中的內容換行,justify-content: center表示內容水平居中,align-items: center表示內容垂直居中。
我們還需要給圖片設置一些樣式,讓它們并排顯示。
.picture img { margin-right: 20px; margin-bottom: 20px; }
上述代碼中,margin-right: 20px表示圖片的右側留出20像素的空白,margin-bottom: 20px表示圖片下方留出20像素的空白。
最后,我們還需要去掉文字的默認邊距。
.picture p { margin: 0; }
上述代碼中,margin: 0表示去掉文字的所有邊距。
以上就是使用CSS實現圖片并排下方有文字的方法??梢愿鶕枰{整樣式。