如何 - 水平可滾動圖片畫廊
學習如何使用 CSS 建立帶有水平捲軸的圖片畫廊。
帶有水平滾動的圖片畫廊
使用水平捲軸檢視其他圖片
建立一個帶有水平滾動的圖片畫廊
步驟 1) 新增 HTML
示例
<div class="scroll-container">
<img src="img_5terre.jpg" alt="五漁村">
<img src="img_forest.jpg" alt="森林">
<img src="img_lights.jpg" alt="北極光">
<img src="img_mountains.jpg" alt="山脈">
</div>
步驟 2) 新增 CSS
示例
div.scroll-container {
background-color: #333;
overflow: auto;
white-space: nowrap;
padding: 10px;
}
div.scroll-container img {
padding: 10px;
}
自己動手試一試 »
提示：請訪問我們的 HTML 圖片教程以瞭解有關圖片的更多資訊。
提示：請訪問我們的 CSS 樣式圖片教程以瞭解有關如何樣式化圖片的更多資訊。
