CSS中有許多布局方式,其中之一是通過橫向滾動來排列圖片。這種布局方式可以使您的頁面看起來更加動態和有趣。
/*首先,將圖片容器設置為flexbox并隱藏溢出部分,這樣圖片就不會換行*/ .container { display: flex; overflow-x: auto; flex-wrap: nowrap; } /*接下來,用flexbox讓每張圖片平均分布在容器中*/ img { flex: 1; margin: 0 3px; object-fit: cover; /*保持圖片比例,填充整個容器*/ height: 200px; }
如果您希望用戶可以使用手勢或鼠標滾輪來滾動圖片,請添加以下CSS:
.container::-webkit-scrollbar { display: none; /*隱藏滾動條*/ } .container { -ms-overflow-style: none; /*隱藏IE/Edge滾動條*/ scroll-snap-type: x mandatory; /* 每頁按x軸中間分割*/ scroll-snap-points-x: repeat(100%); /*滾動到下一頁時,中心位置恰好位于容器的左側或右側*/ }
現在,您的圖片容器將非常漂亮地橫向滾動!