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 应该大于 300 像素 * 所有三张图片的总宽度的 3。

#primaryContent{
    min-width:950px;
}

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

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

READ MORE HERE

希望这对您有所帮助。

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

相关文章:

html - 我如何(在何处)使用 css 在嵌套的 html 表格中设置固定的单元格大小?

html - 设置为内联的 header 元素扩展到容器 div 之外

html - 将登录页面创建为弹出窗口,使页面变得模糊

javascript - 具有无限可选参数的 Backbone 路由

javascript - 页面加载后,如何让我的弹跳汉堡菜单在经过一定秒数后停止弹跳?

php - HTML5 canvas - 将保存的图像分享到社交媒体

html - 调用 View 时如何将CSS动画应用于 Angular View

javascript - 使用媒体查询隐藏类

文档准备好之前的 Javascript onload 事件和其他事件

html - 为什么我的 div 无法识别其内部自定义组件的高度?