html - 如果用户调整浏览器大小,我如何制作水平滚动条?

标签 html css

html代码,

<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="utf-8">
        <style>
            #primaryContent{
                text-align: center;

            }
        </style>
    </head>

    <body id="twoColLayout">
        <div id="primaryContent">
            <img src="banner_1.png" /><img src="banner_2.jpg" /><img src="banner_3.png" />

        </div>

    </body>
</html>

这就是结果。

enter image description here

好的,这很好,但是如果让浏览器变小,

它是这样的,

enter image description here

我怎样才能制作滚动条,而不是放下图像?

最佳答案

您需要使用 min-width属性来实现您正在寻找的东西。

例如,让我们假设您的每张图片都是 300 像素宽,所以您的 #primaryContent包含图像的应大于所有三个图像总宽度的 300px * 3。

#primaryContent{
    min-width:950px;
}

一旦浏览器被拉伸(stretch)到 950 像素或更小,这将创建一个水平滚动条。

PS: 950px 是一个任意值。根据您的要求计算其宽度。

READ MORE HERE

希望这可以帮助。

关于html - 如果用户调整浏览器大小,我如何制作水平滚动条?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/20374673/

相关文章:

javascript - 使用HTML5拖放

css - 固定高度 div 内的最大高度 div 内的最大高度图像

jquery - Animate.css的轮播滑动过渡

javascript - 通过 JS (quilljs) 注入(inject)的 HTML 元素与 flexbox 冲突

javascript - 我应该使用 prefixfree.js 吗?

html - 3 Columned Ribbon 没有按照我想要的方式工作

jquery - 使用 jquery 选择第一个 div

css - Div重叠元素

javascript - 使用AJAX单击提交按钮后刷新div,而不是页面

html - 如何在两个Divs Tumblr之间创建一条垂直线