我有一个具有固定高度和宽度（275x1000px）的容器 DIV。在这个 DIV 中，我想放置多个浮动 DIV，每个 DIV 宽度为 300 像素，并显示一个水平（x 轴）滚动条，以允许用户左右滚动以查看所有内容。
到目前为止，这是我的 CSS：
div#container {
height: 275px;
width: 1000px;
overflow-x: auto;
overflow-y: hidden;
max-height: 275px;
}
div#container div.block {
float: left;
margin: 3px 90px 0 3px;
}
问题是浮动 DIV 不会继续超过容器的宽度。在放置三个浮动 DIV 后，它们将继续在下方。如果我将 overflow-y 更改为 auto，则会出现垂直滚动条，我可以向下滚动。
如何更改此设置以使浮动 DIV 继续运行而不会彼此下方？
div#container {
height: 275px;
width: 1000px;
overflow: auto;
white-space: nowrap;
}
div#container span.block {
width: 300px;
display: inline-block;
}
这里的技巧是只有默认行为为 inline 的元素在 Internet Explorer 中设置为 inline-block 时才会正常运行，因此内部容器需要是 <span> 而不是 <div>。
您需要一个宽大的额外 div 来包含这些块，然后它们将比容器 div 扩展得更宽，并且不会下降到新行。
的HTML：
<div id="container">
<div id="width">
<div class="block">
<!-- contents of block -->
</div>
<div class="block">
<!-- contents of block -->
</div>
<div class="block">
<!-- contents of block -->
</div>
<!-- more blocks here -->
</div>
</div>
CSS：
#container {
height: 275px;
width: 1000px;
overflow-x: auto;
overflow-y: hidden;
max-height: 275px;
}
#container #width {
width:2000px; /* make this the width you need for x number of blocks */
}
#container div.block {
float: left;
margin: 3px 90px 0 3px;
}
#row {
white-space: nowrap; /* important */
overflow: auto;
}
.items {
display: inline-block;
}<div id="row">
<div class="items">
<img src="//placehold.it/200/100" alt="item 1" />
</div>
<div class="items">
<img src="//placehold.it/200/100" alt="item 2" />
</div>
<div class="items">
<img src="//placehold.it/200/100" alt="item 3" />
</div>
<div class="items">
<img src="//placehold.it/200/100" alt="item 4" />
</div>
<div class="items">
<img src="//placehold.it/200/100" alt="item 5" />
</div>
<div class="items">
<img src="//placehold.it/200/100" alt="item 6" />
</div>
<div class="items">
<img src="//placehold.it/200/100" alt="item 7" />
</div>
<div class="items">
<img src="//placehold.it/200/100" alt="item 8" />
</div>
<div class="items">
<img src="//placehold.it/200/100" alt="item 9" />
</div>
<div class="items">
<img src="//placehold.it/200/100" alt="item 10" />
</div>
</div>这里的技巧是父元素的“white-space: nowrap”属性，它简单地告诉它的所有子元素水平继续，以及它的子元素的“display: inline-block”属性。您无需添加任何其他属性即可完成这项工作。
JS 小提琴：http: //jsfiddle.net/2c4jfetf/
将浮动 div 包裹在另一个宽度更宽的 div 中。
<div style="width:230px;overflow-x:auto;background-color:#ccc;">
<div style="width:400px">
<div style="height:100px;width:100px;float:left;border:1px solid #000;"></div>
<div style="height:100px;width:100px;float:left;border:1px solid #000;"></div>
<div style="height:100px;width:100px;float:left;border:1px solid #000;"></div>
</div>
</div>
采用：
div#container {
overflow: auto;
}
或者在三个div下面加上一个clearing div，样式如下：
{
clear: both
}
将要滚动的 div 放入表格中，如下所示：
<div style='width:1000;border:2 solid red;overflow-x:auto'>
<table><tr>
<td><div style='width:300;height:200;border:1 solid black'>Cell 1 </div></td>
<td><div style='width:300;height:200;border:1 solid black'>Cell 2 </div></td>
<td><div style='width:300;height:200;border:1 solid black'>Cell 3 </div></td>
<td><div style='width:300;height:200;border:1 solid black'>Cell 4 </div></td>
<td><div style='width:300;height:200;border:1 solid black'>Cell 5 </div></td>
</tr></table>
</div>
编辑：我尝试了其中 3 个建议的解决方案 - 它们在 Google Chrome 中都可以正常工作 - 但第一个（container1）在 IE 中不起作用（如图） - 所以 SPAN 解决方案得到了我的投票:-)：
<html>
<body>
<style>
div#container1
{
height: 275px;
width: 100%;
overflow: auto;
white-space: nowrap;
border:2 solid red;
}
div#container1 div.block
{
width: 300px;
height: 200px;
display: inline-block;
border: 1 solid black;
}
div#container2
{
height: 275px;
width: 100%;
overflow: auto;
white-space: nowrap;
border:2 solid red;
}
div#container2 span.block
{
width: 300px;
height: 200px;
display: inline-block;
border: 1 solid black;
}
div#container3
{
height: 275px;
width: 100%;
overflow: auto;
white-space: nowrap;
border:2 solid red;
}
div#container3 div.block
{
width: 300px;
height: 200px;
display: inline-block;
border: 1 solid black;
}
</style>
<p>
<div id='container1'>
<div class='block'>Cell 1 </div>
<div class='block'>Cell 2 </div>
<div class='block'>Cell 3 </div>
<div class='block'>Cell 4 </div>
<div class='block'>Cell 5 </div>
</div>
<p>
<div id='container2'>
<span class='block'>Cell 1 </span>
<span class='block'>Cell 2 </span>
<span class='block'>Cell 3 </span>
<span class='block'>Cell 4 </span>
<span class='block'>Cell 5 </span>
</div>
<p>
<div id='container3'>
<table><tr>
<td><div class='block'>Cell 1 </div></td>
<td><div class='block'>Cell 2 </div></td>
<td><div class='block'>Cell 3 </div></td>
<td><div class='block'>Cell 4 </div></td>
<td><div class='block'>Cell 5 </div></td>
</tr></table>
</div>
</body>
</html>
编辑2：
我通过 browsershots.org 运行了这个测试页面，看看不同的浏览器是如何处理它的。结论：浏览器兼容性很差。:-)
http://browsershots.org/http://dot-dash-dot.com/files/test_div2.htm
表格解决方案的工作频率更高——但 span 选项（更简洁）只在我从未听说过的浏览器上中断。:-)
表解决方案应该工作得很好。
如果您不想使用表格，您还可以将所有 .block div 放在 #container 内的另一个 div 中，并在加载页面后使用 javascript 为“in-between-div”赋予一个固定的 - 计算的 - 宽度。
当然，如果您已经知道有多少个 .blocks/如果数量是固定的，则可以使用 css 为“in-between-div”提供固定宽度。
听起来你正在用 div 做画廊？
你到底在用 div 做什么？
使用 ul/li 和 li 内部的 span 可能更容易获得相同的效果，而没有浮动 div 的所有麻烦。
我的前夫：
div 宽度：850px gridview templatedcolumn ItemTemplate
<span class="buttonspanlt"></span><asp:Button ID="imgEditSave" runat="server" Text="Edit SubStatus" CssClass="buttoncenter" OnClick="imgEditSave_OnClick"/><span class="buttonspanrt"></span>
<span style="display:none;float:left;clear:left;" id="spangrdCancel" runat="server"><span class="buttonspanlt"></span><asp:Button ID="imgCancel" runat="server" Text="Cancel" class="buttoncenter"/><span class="buttonspanrt"></span></span>
end ItemTemplate end templatedcolumn end gridview end div
该按钮具有左中间（实际按钮）右跨度，其中不浮动，因为外部 div 具有固定宽度。
我必须在按钮外使用宽度为 140px 的附加 div ，然后在 itemtemplate 内使用它。
希望这可以帮助！！！
谢谢你，哈里什