CSS浮动 - 如何将它们保持在一条线上？

Question

我希望在同一行上有两个项目,左边的项目使用'float:left'.

单凭这一点我没有任何问题.问题是,即使你非常小的浏览器调整大小,我希望这两个项目保持在同一行.你知道......就像桌子一样.

无论如何,目标是保持右边的物品不被包裹.

那么如何告诉浏览器使用css我宁愿拉伸包含div而不是包装它以便float: leftdiv 在div之下div？

例如:我想要的:

                                   \
 +---------------+  +------------------------/
 | float: left;  |  | float: right;          \
 |               |  |                        /
 |               |  |content stretching      \   Screen Edge
 |               |  |the div off the screen  /  <---
 +---------------+  +------------------------\
                                             /

Answer 1

另一种选择是,而不是浮动,将white-space属性nowrap设置为父div:

.parent {
     white-space: nowrap;
}

并重置白色空间并使用内联块显示,以便div保持在同一行,但您仍然可以给它一个宽度.

.child {
    display:inline-block;
    width:300px;
    white-space: normal;
}

这是一个JSFiddle:https://jsfiddle.net/9g8ud31o/

Answer 2

将浮动<div>s 包装在<div>使用此跨浏览器最小宽度hack 的容器中:

.minwidth { min-width:100px; width: auto !important; width: 100px; }

您可能还需要设置"溢出"但可能不需要.

这是因为:

• 该!important声明与min-widthIE7 +中的所有内容保持一致
• IE6没有实现min-width,但它有一个错误,它width: 100px会覆盖!important声明,导致容器宽度为100px.

Answer 3

将您的浮动体包裹在div中,其最小宽度大于浮动体的总宽度+边距.

不需要hacks或HTML表.

Answer 4

解决方案1:

display:table-cell(不广泛支持)

解决方案2:

表

(我讨厌黑客.)

Answer 5

另一种选择:不要漂浮你的右栏; 只需给它一个左边距将其移动到浮点之外.你需要一两个修复IE6,但这是基本的想法.