CSS中有許多方法可以讓圖片橫著排列,最常見的方法是使用float屬性。
img { float: left; margin-right: 20px; }
這個代碼片段將圖片向左浮動,同時在圖片右側留出20像素的空白。
另一種讓圖片橫著排列的方法是使用flexbox。以下是一個簡單的例子:
.container { display: flex; flex-direction: row; align-items: center; } img { margin-right: 20px; }
這個代碼片段創建了一個 flex 容器,其中的元素按照行排列,默認在橫軸上居中對齊,圖片之間的空白與第一種方法一樣。
如果你想要讓兩張圖片緊貼著排列,可以使用以下代碼:
img { display: inline-block; vertical-align: middle; margin-right: -4px; }
這個代碼片段將圖片設為行內塊級元素,并將它們在垂直方向上對齊,同時將圖片之間的間距減少到 4 像素。
總之,這只是介紹如何橫著排列圖片的幾個方法中的一部分,你可以根據具體情況選擇適合自己的方法來實現。