在網頁設計過程中，照片橫向排列是非常常見的需求。通過CSS樣式，我們可以輕松地實現這一功能，為網頁增添美麗。

/**
* 照片橫向排列的CSS代碼演示 
*/
.row {
display: flex;
flex-wrap: wrap;
justify-content: space-between;
}
.item {
width: 30%;
padding: 10px;
margin-bottom: 20px;
}
.item img {
max-width: 100%;
}

首先，我們需要使用Flex布局來橫向排列照片。通過設置父元素的display屬性為flex，我們可以讓它的子元素排列方式按照Flex模式展示。

接著，我們需要使用flex-wrap屬性來控制子元素的換行方式。在這里，我們設定為wrap，表示子元素在父元素寬度不夠時會自動換行。

最后，我們使用justify-content屬性來調整子元素的對齊方式。在這里，我們將對齊方式設置為space-between，表示子元素之間的間距相等，并且與父元素的兩側有一定的距離。

對于每個子元素，我們可以使用width屬性來控制它們的寬度，并且通過padding屬性來設定上下左右的內邊距。同時，我們可以使用margin屬性來設定子元素與其它元素之間的間距。

最后，我們需要使用img標簽來加載照片，并且在樣式中使用max-width屬性來保證它們不會超出父元素的寬度。

通過這些簡單的CSS樣式，我們可以輕松地實現照片的橫向排列。此外，我們還可以使用JavaScript來自定義更多的照片展示效果，讓網頁更具有吸引力。