Html 如何让固定宽度的 DIV 中的浮动 DIV 水平继续？
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/1015809/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
How to get Floating DIVs inside fixed-width DIV to continue horizontally?
提问by Matt McCormick
I have a container DIV with a fixed height and width (275x1000px). In this DIV I want to put multiple floating DIVs each with a width of 300px, and have a horizontal (x-axis) scrollbar appear to allow the user to scroll left and right to view everything.
我有一个具有固定高度和宽度 (275x1000px) 的容器 DIV。在这个 DIV 中，我想放置多个浮动 DIV，每个 DIV 的宽度为 300 像素，并显示一个水平（x 轴）滚动条以允许用户向左和向右滚动以查看所有内容。
This is my CSS so far:
到目前为止，这是我的 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;
}
The problem is that the floating DIVs will not continue past the width of the container. After putting three of the floating DIV's they will continue on beneath. If I change overflow-y to auto, then the vertical scrollbar appears and I can scroll down.
问题是浮动的 DIV 不会继续超过容器的宽度。放置三个浮动 DIV 后，它们将继续在下方。如果我将溢出-y 更改为自动，则会出现垂直滚动条并且我可以向下滚动。
How can I change this to make the floating DIVs continue on without going beneath each other?
如何更改此设置以使浮动 DIV 继续运行而不会相互降低？
回答by pd.
div#container {
height: 275px;
width: 1000px;
overflow: auto;
white-space: nowrap;
}
div#container span.block {
width: 300px;
display: inline-block;
}
The trick here is only elements that behave as inline by default will behave properly when set to inline-block in Internet Explorer, so the inner containers need to be <span> instead of <div>.
这里的技巧是，只有在 Internet Explorer 中设置为 inline-block 时，默认行为为内联的元素才会正常运行，因此内部容器需要是 <span> 而不是 <div>。
回答by Matthew James Taylor
You need an extra div with a large width to contain the blocks, then they will extend wider than the container div and not drop down to a new line.
您需要一个大宽度的额外 div 来包含块，然后它们将比容器 div 扩展得更宽，而不是下降到一个新行。
The HTML:
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>
The CSS:
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;
}
回答by praisegeek
#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>The trick here is the "white-space: nowrap" property of the parent which simply tells all it's child elements to continue horizontally and the "display: inline-block" property of it's children. You don't need to add any other property to make this work.
这里的技巧是父元素的“white-space: nowrap”属性，它只是告诉它的所有子元素水平继续，以及它的子元素的“display: inline-block”属性。您不需要添加任何其他属性来完成这项工作。
JS Fiddle: http://jsfiddle.net/2c4jfetf/
JS小提琴：http: //jsfiddle.net/2c4jfetf/
回答by Emily
Wrap your floated divs in another div with the wider width.
将浮动的 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>
回答by SkyLar
It sounds like you are doing gallery with div's?
听起来你正在用 div 做画廊？
What exactly are you using the divs for?
你到底用 div 做什么？
It may be easier to use a ul/li with spans inside of the li to get the same effect without all the headaches of floating divs.
在 li 内部使用跨度的 ul/li 可能更容易获得相同的效果，而不会出现浮动 div 的所有麻烦。
回答by user2639797
My Ex:
我的前夫：
div width: 850px gridview templatedcolumn ItemTemplate
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
end ItemTemplate end templatedcolumn end gridview end div
the button has left middle(actual button) right spans which where not floating as there was outer div with fixed width.
该按钮的左中间（实际按钮）右跨度不浮动，因为有固定宽度的外部 div。
I had to use additional div with width 140px outside the button , inside the itemtemplate then it worked.
我不得不在 button 外、itemtemplate 内使用宽度为 140px 的额外 div 然后它起作用了。
Hope this helps!!!
希望这可以帮助！！！
Thank You Harish
谢谢你
回答by Rony
Use:
用：
div#container {
overflow: auto;
}
Or add a clearing div below the three divs with the style:
或者在三个div下面添加一个clearing div，样式如下：
{
clear: both
}
回答by Ron Savage
Put the divs you want to scroll in a table like so:
将要滚动的 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>
Edit: I tried 3 of these suggested solutions - they all work fine in Google Chrome - but the first one (container1) doesn't work in IE (go figure) - so the SPAN solution gets my vote :-) :
编辑：我尝试了这些建议的解决方案中的 3 个——它们在谷歌浏览器中都可以正常工作——但第一个（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>
Edit 2:
编辑2：
I ran this test page through browsershots.org, to see how different browsers handle it. Conclusion: Browser compatibility sucks. :-)
我通过 browsershots.org 运行了这个测试页面，看看不同的浏览器如何处理它。结论：浏览器兼容性很差。:-)
http://browsershots.org/http://dot-dash-dot.com/files/test_div2.htm
http://browsershots.org/http://dot-dash-dot.com/files/test_div2.htm
The table solution worked more often - but the span option (which is cleaner) only broke on browsers I've never heard of. :-)
表格解决方案更频繁地工作 - 但跨度选项（更干净）只在我从未听说过的浏览器上中断。:-)
回答by jeroen
The table solution should work very well.
表格解决方案应该工作得很好。
If you don't want to use tables, you can also put all .block divs in another div inside the #container and give that "in-between-div" a fixed - calculated - width using javascript after loading the page.
如果您不想使用表格，您还可以将所有 .block div 放在 #container 内的另一个 div 中，并在加载页面后使用 javascript 为“in-between-div”提供一个固定的计算宽度。
Of course if you already know how many .blocks you have / if the number is fixed, you can give the "in-between-div" a fixed width using css.
当然，如果你已经知道你有多少个 .blocks/如果数字是固定的，你可以使用 css 给“in-between-div”一个固定的宽度。
