如何 - 水平可滚动图片画廊
学习如何使用 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 样式图片教程以了解有关如何样式化图片的更多信息。