Html 防止浮动 div 换行到新行
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/9672176/
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
Prevent floated divs from wrapping to new line
提问by Adam Grant
I've seen this asked a few times on SO, and the same answers are given which do not work on my end in Chrome or Firefox.
我已经在 SO 上多次看到这个问题，并且给出了相同的答案，但在我的 Chrome 或 Firefox 中不起作用。
I want to make a set of left-floated divs run off, horizontally a parent div with a horizontal scroll bar.
我想让一组左浮动的 div 运行，水平地是一个带有水平滚动条的父 div。
I'm able to demonstrate what I want to do with this crappy inline css here: http://jsfiddle.net/ajkochanowicz/tSpLx/3/
我可以在这里演示我想用这个蹩脚的内联 css 做什么：http: //jsfiddle.net/ajkochanowicz/tSpLx/3/
However, from the answers given on SO*, this should work but does not on my end. http://jsfiddle.net/ajkochanowicz/tSpLx/2/
但是，从 SO* 上给出的答案来看，这应该有效，但对我而言却无效。 http://jsfiddle.net/ajkochanowicz/tSpLx/2/
Is there a way to do this without defining absolute positioning for each item?
有没有办法在不为每个项目定义绝对定位的情况下做到这一点？
采纳答案by AaronSieb
This should be all you need.
这应该就是你所需要的。
.float-wrap {
/* 816 = <number of floats> * (<float width> + 2 * <float border width>) */
width: 816px;
border: 1px solid;
/* causes .float-wrap's height to match its child divs */
overflow: auto;
}
.left-floater {
width: 100px;
height: 100px;
border: 1px solid;
float: left;
}
.outer {
overflow-x: scroll;
}<div class="outer">
<div class="float-wrap">
<div class="left-floater">
One
</div>
<div class="left-floater">
Two
</div>
<div class="left-floater">
Three
</div>
<div class="left-floater">
I should be to the <s>left</s> right of "Three"
</div>
<div class="left-floater">
I float.
</div>
<div class="left-floater">
I float.
</div>
<div class="left-floater">
I float.
</div>
<div class="left-floater">
I float.
</div>
</div>
</div>.float-wrap keeps space open for the divs. Because it will always maintain at least enough space to keep them side-by-side, they'll never need to wrap. .outer provides a scroll bar, and sizes to the width of the window.
.float-wrap 为divs保留空间。因为它将始终保持至少足够的空间来将它们并排放置，所以它们永远不需要包装。.outer 提供了一个滚动条，并根据窗口的宽度调整大小。
回答by BraMKJ
This question has been asked quite a while ago, but still shows up high in search engine results. Therefore I feel it is still useful to add a new answer. It is now also possible to achieve the desired outcome without setting a fixed width to the parent by using flexbox (which now has decent browser support).
这个问题很久以前就有人问过了，但仍然出现在搜索引擎结果中。因此我觉得添加一个新的答案还是很有用的。现在还可以通过使用 flexbox（现在有不错的浏览器支持）来实现所需的结果，而无需为父级设置固定宽度。
Using the class names from the example (which are a bit off now since the elements aren't actually floated anymore):
使用示例中的类名（现在有点偏离，因为元素实际上不再浮动了）：
.float-wrap {
display: flex;
flex-wrap: nowrap;
}
.left-floater {
flex: 0 0 100px;
}
.outer {
overflow-x: auto
}
回答by Kory Sharp
Use a second wrapper around the elements with absolute positioning. Then you can just float the individual items.
在具有绝对定位的元素周围使用第二个包装器。然后你可以浮动单个项目。
<style type="text/css">
#outter {
position: relative;
width: 500px;
height: 200px;
overflow: scroll;
}
#inner {
position: absolute;
top: 0;
left: 0;
width: 1000px;
height: 200px;
}
#inner .item {
float: left;
display: inline;
}
</style>
<div id="outter">
<div id="inner">
<div class="item">Item #1</div>
<div class="item">Item #2</div>
<div class="item">Item #3</div>
</div>
</div>
You will have to adjust the width of #inner based on the number of items you'll have inside it. This can be done on load if you know the number of items or with javascript after the page loads.
您必须根据其中包含的项目数量调整 #inner 的宽度。如果您知道项目的数量或在页面加载后使用 javascript，则可以在加载时完成此操作。
