本文目錄導(dǎo)讀：

1. HTML結(jié)構(gòu)準(zhǔn)備
2. 使用CSS進(jìn)行布局

CSS布局技巧：圖片橫向排列

在網(wǎng)頁設(shè)計(jì)中，我們經(jīng)常需要將多張圖片橫向排列，以展示一系列相關(guān)內(nèi)容或者構(gòu)成一個(gè)美觀的版面，下面，我們將探討如何使用CSS將四張圖片排成一行。

HTML結(jié)構(gòu)準(zhǔn)備

我們需要在HTML中創(chuàng)建四個(gè)圖像元素，每個(gè)元素對(duì)應(yīng)一個(gè)圖片。

<div class="image-row">
    <img src="image1.jpg" alt="Image 1">
    <img src="image2.jpg" alt="Image 2">
    <img src="image3.jpg" alt="Image 3">
    <img src="image4.jpg" alt="Image 4">
</div>

使用CSS進(jìn)行布局

我們通過CSS來控制這些圖片的布局，為了讓圖片橫向排列，我們可以使用CSS的display: inline-block屬性，或者利用Flexbox布局。

方法1：使用display: inline-block

在CSS中，為包含圖片的div設(shè)置樣式，讓其中的img元素以inline-block顯示：

.image-row img {
    display: inline-block;
    vertical-align: top;  /* 垂直對(duì)齊方式 */
    margin-right: 10px;  /* 圖片間的間隔，可以根據(jù)需要調(diào)整 */
}

方法2：使用Flexbox布局

另一種方法是使用CSS的Flexbox布局，這是一種更現(xiàn)代、更靈活的方式：

.image-row {
    display: flex;  /* 使用Flexbox布局 */
    justify-content: space-between;  /* 圖片間的空間分布 */
}

這兩種方法都可以實(shí)現(xiàn)將四張圖片橫向排列，在實(shí)際應(yīng)用中，可以根據(jù)具體需求和瀏覽器兼容性來選擇合適的方法，還可以通過調(diào)整margin、padding等屬性來微調(diào)圖片間的間距，以達(dá)到更好的視覺效果。