滚动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浮动而不是打破

回答

相关问题