使用CSS橫向排列圖片非常方便，只需使用flexbox布局即可。以下是示例代碼：

首先，在HTML中創建一個包含多張圖片的容器，例如div元素。

<div class="image-container">
<img src="image1.jpg">
<img src="image2.jpg">
<img src="image3.jpg">
<img src="image4.jpg">
</div>

接著，在CSS中使用flexbox布局來實現橫向排列：

.image-container {
display: flex;
flex-wrap: wrap;
justify-content: space-between;
}
img {
width: 25%;
}

首先，將容器的display屬性設置為flex，這樣圖片就能夠水平排列。然后，將flex-wrap屬性設置為wrap，以便在需要時折疊圖片。最后，使用justify-content屬性將圖片與容器邊緣保持間距。

通過將圖片的寬度設置為25%，我們可以將四張圖片水平放置在一行中。為了更好地控制圖片的大小和間距，請根據需要調整CSS代碼。

在大多數情況下，這個方法可以很好地橫向排列圖片。但是，如果您的容器中有過多的圖片，它們可能會在一行中變得太小，因此可以使用媒體查詢在不同的屏幕尺寸下調整樣式。

總之，使用CSS橫向排列圖片非常簡單，只需幾行代碼即可完成。使用flexbox布局可以輕松地水平排列圖片和空白間距，并且可以根據需要進行調整。