滚动CSS浮动而不是中断
我正在创建一系列的列，它们彼此相对地向左浮动。我希望这样，当列大于其容器时，会出现一个水平滚动条，而不是下拉的列。这是我所拥有的滚动CSS浮动而不是中断,css,css-float,Css,Css Float,我正在创建一系列的列，它们彼此相对地向左浮动。我希望这样，当列大于其容器时，会出现一个水平滚动条，而不是下拉的列。这是我所拥有的 <body> <div id="container"> <div id="col1" class="col">Column One</div> <div id="col2" class="col">Column Two</div> ... </div>
<body>
<div id="container">
<div id="col1" class="col">Column One</div>
<div id="col2" class="col">Column Two</div>
...
</div>
</body>
理想情况下，我希望滚动条位于页面/正文级别，因为页面只是列。将宽度放在容器和正文之外。这将解决问题。它将与此CSS一起工作：
#container { width: 100%; overflow: auto; white-space: nowrap; }
.col { display: inline-block; width: 250px; }
注意：显示块不适用于IE，请记住，您在CSS中拼错了“container”，但在HTML中没有拼错！我的原始代码是正确的。只是在这里输入错误…不起作用，当我调整窗口大小时仍然会删除浮动。容器上的inline-block代替float和nowrap工作得很好。不用担心IE
#container { width: 100%; overflow: auto; white-space: nowrap; }
.col { display: inline-block; width: 250px; }
#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>