我有一个高度和宽度固定的容器DIV（275x1000px）。在这个DIV中，我想放置多个浮动DIV，每个DIV的宽度为300px，并且有一个水平（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继续运行而不会相互低下？
答案 0 :(得分：40)
div#container {
height: 275px;
width: 1000px;
overflow: auto;
white-space: nowrap;
}
div#container span.block {
width: 300px;
display: inline-block;
}
这里的技巧只是在Internet Explorer中设置为内联块时，默认情况下行为内联的元素才会正常运行，因此内部容器需要＆lt; span＆gt;而不是＆lt; div＆gt;。
答案 1 :(得分：8)
你需要一个宽大的额外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;
}
答案 2 :(得分：6)
#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”属性。您无需添加任何其他属性即可实现此功能。
答案 3 :(得分：1)
将浮动的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>
答案 4 :(得分：0)
使用：
div#container {
overflow: auto;
}
或者在三个div之下添加一个清除div，其格式为：
{
clear: both
}
答案 5 :(得分：0)
将想要滚动的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个建议的解决方案 - 它们在谷歌浏览器中都运行正常 - 但第一个（容器1）在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选项（更干净）只能在我从未听说过的浏览器上打破。 ： - ）
答案 6 :(得分：0)
表格解决方案应该可以很好地运作。
如果你不想使用表，你也可以将所有.block div放在#container中的另一个div中，并在加载页面后使用javascript将“in-between-div”赋予固定计算的宽度
当然，如果您已经知道有多少.blocks /如果数字是固定的，您可以使用css将“in-between-div”赋予固定宽度。
答案 7 :(得分：0)
听起来你正在和div一起做画廊？
你究竟使用的是什么？
在li内部使用带有跨距的ul / li可能更容易获得相同的效果，而不会出现浮动div的所有麻烦。
答案 8 :(得分：0)
我的前任：
div宽度：850px 网格视图 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>
结束ItemTemplate 结束模板 结束gridview 结束div
按钮左侧中间（实际按钮）右侧跨越，其中没有浮动，因为外部div具有固定宽度。
我不得不在按钮外面使用宽度为140px的额外div，在itemtemplate内部然后它可以工作。
希望这有帮助!!!
谢谢 哈里什