如何讓div在調整大小時水平滾動。

Question

我試圖讓內容div顯示一個horzontial滾動條，一旦頁面變得太窄內容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來使其工作。