CSS照片橫著，是指將圖片水平放置在網頁上。這是一種鮮明的視覺效果，能夠帶來不同于垂直排列的視覺感受。下面我們來學習如何使用CSS實現照片橫著。

/* CSS代碼 */
img {
display: block;
width: 100%;
height: auto;
margin-bottom: 20px;
}
@media (min-width: 768px) {
/* 當屏幕寬度大于等于768px時，將圖片水平排列 */
img {
float: left;
margin-right: 20px;
margin-bottom: 0;
}
}

以上代碼中，首先為圖片設置了基本的樣式，包括展示為塊級元素、寬度為100%、高度自適應、底部留白20px。這樣可以使圖片在垂直排列時有一個合適的間距。

接著，使用CSS媒體查詢指定了屏幕寬度大于等于768px時的樣式。在這種情況下，圖片改為使用浮動布局，浮動至左側，并且與下方的元素間距為0，而右側則保留20px的留白。以上設置使得圖片能夠水平排列，并呈現出優美的空白間隔效果。

使用CSS實現照片橫著，不僅能夠提升網頁的視覺品質，還能夠帶來更好的用戶體驗和易用性。我們只需在樣式表中添加一些簡單的代碼，就可以輕松實現這個效果。