滾動CSS浮動而不是打破

我創建了一系列所有浮動左對抗海誓山盟。我想這樣做，以便當列大於他們的容器時出現水平滾動條而不是列下降。這是我有...滾動CSS浮動而不是打破

<body> 
    <div id="container"> 
    <div id="col1" class="col">Column One</div> 
    <div id="col2" class="col">Column Two</div> 
    ... 
    </div> 
</body>

用CSS：

body { width: 100%; height: 100%; overflow: auto; } 
#container { width: 100%; height: 100%; } 
.col { float: left; width: 250px; height: 100%; }

我會非常想對頁面/體水平滾動條，因爲頁面是什麼，但列。

來源

2012-03-08 Fluidbyte

請記住，您的拼寫錯誤「容器」在您的CSS，但不是在您的HTML！ – 2012-03-08 18:27:18

我原來的代碼是正確的。只是在這裏輸入錯誤... – Fluidbyte 2012-03-08 18:33:23

它將與這個CSS工作：

#container { width: 100%; overflow: auto; white-space: nowrap; } 
.col { display: inline-block; width: 250px; }

注意：不工作的IE < = 7

顯示塊的其他解決方案是使用兩個容器和固定的寬度第二個與列寬的總和：

#container1 { width: 100%; overflow: auto; white-space: nowrap; } 
#container2 { width: 1250px; } 
.col { float:left; width: 250px; } 

<div id="container1"> 
    <div id="container2"> 
    <div class="col">Column 1</div> 
    <div class="col">Column 2</div> 
    <div class="col">Column 3</div> 
    <div class="col">Column 4</div> 
    <div class="col">Column 5</div> 
    ... 
    </div> 
</div>

如果你想要滾動條在身上，只需刪除overflow：auto on #contai ner和＃container1

來源

2012-03-08 18:51:17

內聯塊代替漂浮物，容器上的nowrap工作得很漂亮。不用擔心IE <= 7，這是一個非常受控制的應用程序。謝謝！ – Fluidbyte 2012-03-08 19:01:32

把寬度從容器和身體放出。這應該可以解決問題。

來源

2012-03-08 18:40:41

無法正常工作，當我調整窗口大小時仍然會掉落浮標。 – Fluidbyte 2012-03-08 18:49:36

滾動CSS浮動而不是打破

回答

相關問題