如何在调整大小时水平滚动div。

Question

我试图让内容div显示一个可怕的滚动条，一旦页面对于内容div内的内容变得太窄。目前，我的设置如下：

HTML：

<div id="LeftNavigation">
    <div id="TopNav">Menu1</div>
    <div id="BottomNav">Menu2</div>
</div>
<div id="ContentContainer">
    <div style="float: left; width: 500px">Content1</div>
    <div style="float: left;">Content2</div>
<div>

CSS：

#LeftNavigation {
    float: left;
}

#TopNav,
#BottomNav {
    width: 165px;
}

#ContentContainer {
    margin-left: 180px;
    min-height: 150px;
    padding: 10px;
}

我想让我的页面工作如下图所示。我的内容容器的最小宽度为... 600像素，然后当页面宽度低于菜单和内容（包括边距）的组合宽度时，会显示一个滚动条。但是，我无法弄清楚如何让它正常工作。每当页面变得太窄时，我的ContentContainer div会一直包裹在LeftNavigation div下面。提前致谢。

Answer 1

您需要将尺寸添加到ContentContainer并添加overflow-x:auto。滚动条将显示在ContentContainer上，而不是您所说明的整个页面。

如果你想在图表中显示它，你需要制作一个假滚动条并使用JavaScript来使它工作。