如何将 CSS 浮动保持在一行中？
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/266015/
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 do I keep CSS floats in one line?
提问by Jiaaro
I want to have two items on the same line using float: leftfor the item on the left.
我想在同一行上有两个项目，float: left用于左侧的项目。
I have no problems achieving this alone. The problem is, I want the two items to stayon the same line even when you resize the browser very small. You know... like how it was with tables.
我独自实现这一点没有问题。问题是，即使您将浏览器的大小调整得非常小，我也希望这两个项目保持在同一行上。你知道......就像桌子一样。
The goal is to keep the item on the right from wrapping no matter what.
目标是无论如何都保持右侧的项目不被包装。
How to I tell the browser using CSS that I would rather stretch the containing divthan wrap it so the the float: right;div is below the float: left;div?
如何使用 CSS 告诉浏览器我宁愿拉伸包含而div不是包装它，以便float: right;div 低于float: left;div?
what I want:
我想要的是：
\
+---------------+ +------------------------/
| float: left; | | float: right; \
| | | /
| | |content stretching \ Screen Edge
| | |the div off the screen / <---
+---------------+ +------------------------\
/
采纳答案by Eric Wendelin
Wrap your floating <div>s in a container <div>that uses this cross-browser min-width hack:
将您的浮动<div>s包装在<div>使用此跨浏览器 min-width hack的容器中：
.minwidth { min-width:100px; width: auto !important; width: 100px; }
You mayalso need to set "overflow" but probably not.
您可能还需要设置“溢出”，但可能不需要。
This works because:
这是有效的，因为：
- The
!importantdeclaration, combined withmin-widthcause everything to stay on the same line in IE7+ - IE6 does not implement
min-width, but it has a bug such thatwidth: 100pxoverrides the!importantdeclaration, causing the container width to be 100px.
- 该
!important声明，联合min-width原因的一切留在IE7 +同一行 - IE6 没有实现
min-width，但它有一个错误，它width: 100px覆盖了!important声明，导致容器宽度为 100px。
回答by Innovaat
Another option is, instead of floating, to set the white-space property nowrap to a parent div:
另一种选择是将空白属性 nowrap 设置为父 div，而不是浮动：
.parent {
white-space: nowrap;
}
and reset the white-space and use an inline-block display so the divs stay on the same line but you can still give it a width.
并重置空白并使用内联块显示，使 div 保持在同一行，但您仍然可以给它一个宽度。
.child {
display:inline-block;
width:300px;
white-space: normal;
}
Here is a JSFiddle: https://jsfiddle.net/9g8ud31o/
这是一个 JSFiddle：https://jsfiddle.net/9g8ud31o/
回答by Czar
Wrap your floaters in a div with a min-width greater than the combined width+margin of the floaters.
将您的漂浮物包裹在一个 div 中，其最小宽度大于漂浮物的宽度 + 边距的组合。
No hacks or HTML tables needed.
不需要黑客或 HTML 表格。
回答by pkario
Solution 1:
解决方案1：
display:table-cell (not widely supported)
display:table-cell（未得到广泛支持）
Solution 2:
解决方案2：
tables
桌子
(I hate hacks.)
（我讨厌黑客。）
回答by Steve Clay
Another option: Do not float your right column; just give it a left margin to move it beyond the float. You'll need a hack or two to fix IE6, but that's the basic idea.
另一种选择：不要浮动你的右列；只需给它一个左边距以将其移动到浮动之外。你需要一两次黑客来修复IE6，但这是基本的想法。
回答by glenatron
Are you sure that floated block-level elements are the best solution to this problem?
您确定浮动块级元素是解决此问题的最佳方法吗？
Often with CSS difficulties in my experience it turns out that the reason I can't see a way of doing the thing I want is that I have got caught in a tunnel-vision with regard to my markup ( thinking "how can I make theseelements do this?" ) rather than going back and looking at what exactly it is I need to achieve and maybe reworking my html slightly to facilitate that.
在我的经验中，CSS 困难经常出现，结果证明我看不到做我想做的事情的方法的原因是我陷入了关于我的标记的隧道视野中（想着“我怎样才能使这些元素执行此操作？”），而不是返回并查看我需要实现的究竟是什么，并且可能稍微修改我的 html 以促进实现。
回答by Rob Elliott
i'd recommend using tables for this problem. i'm having a similar issue and as long as the table is just used to display some data and not for the main page layout it is fine.
我建议使用表格来解决这个问题。我有一个类似的问题，只要表格只是用来显示一些数据而不是用于主页布局就可以了。
回答by Nebojsha
Add this line to your floated element selector
将此行添加到您的浮动元素选择器
.floated {
float: left;
...
box-sizing: border-box;
}
It will prevent padding and borders to be added to width, so element always stay in row, even if you have eg. three elements with width of 33.33333%
它将防止填充和边框添加到宽度，因此元素始终保持在行中，即使您有例如。宽度为 33.33333% 的三个元素
回答by Bruce Allen
When user reduces window size horizontally and this causes floats to stack vertically, remove the floats and on the second div (that was a float) use margin-top: -123px (your value) and margin-left: 444px (your value) to position the divs as they appeared with floats. When done this way, when the window narrows, the right-side div stays in place and disappears when page is too narrow to include it. ... which (to me) is better than having the right-side div "jump" down below the left-side div when the browser window is narrowed by the user.
当用户水平减小窗口大小并导致浮动垂直堆叠时，移除浮动并在第二个 div（即浮动）上使用 margin-top: -123px（你的值）和 margin-left: 444px（你的值）定位 div，因为它们出现在浮点数上。以这种方式完成后，当窗口变窄时，右侧的 div 会保持原位并在页面太窄而无法包含它时消失。...当用户缩小浏览器窗口时，这（对我来说）比让右侧 div“跳”到左侧 div 下方更好。
回答by ScubaSteve
The way I got around this was to use some jQuery. The reason I did it this way was because A and B were percent widths.
我解决这个问题的方法是使用一些 jQuery。我这样做的原因是因为 A 和 B 是百分比宽度。
HTML:
HTML：
<div class="floatNoWrap">
<div id="A" style="float: left;">
Content A
</div>
<div id="B" style="float: left;">
Content B
</div>
<div style="clear: both;"></div>
</div>
CSS:
CSS：
.floatNoWrap
{
width: 100%;
height: 100%;
}
jQuery:
jQuery：
$("[class~='floatNoWrap']").each(function () {
$(this).css("width", $(this).outerWidth());
});
