如何使CSS浮动在一行中？

我想在同一行上使用两个项目float: left作为左侧的项目。

我没有任何问题可以单独实现。问题是，即使您将浏览器的尺寸调整得非常小，我也希望这两项保持同一行。您知道...就像桌子一样。

我们的目标是无论包裹在右边，都不会包裹物品。

如何使用CSS告诉浏览器，我宁愿拉伸包含内容而div不是包装内容，因此float: right;div在float: left; div？之下？

我想要的是：

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

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

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

您可能还需要设置“溢出”，但可能不需要。

之所以有效，是因为：

• 该!important声明，联合min-width原因的一切留在IE7 +同一行
• IE6没有实现min-width，但是它有一个错误，该错误会width: 100px覆盖!important声明，导致容器宽度为100px。

另一种选择是将浮动属性nowrap设置为父div，而不是进行浮动：

.parent {
     white-space: nowrap;
}

并重置空白并使用行内块显示，以便div保持在同一行上，但您仍然可以为其设置宽度。

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

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

将您的浮动广告素材包裹在div中，最小宽度应大于浮动广告素材的宽度+边距之和。

无需黑客或HTML表格。

解决方案1：

display：table-cell（不广泛支持）

解决方案2：

桌子

（我讨厌黑客。）

另一种选择：不浮动右列；只要给它一个左边距就可以将其移到浮动上方。您将需要一两个hack来修复IE6，但这是基本思想。

您确定浮动的块级元素是此问题的最佳解决方案吗？

在我的经验中，经常会遇到CSS困难，事实证明，我看不到自己想要做的事情的原因是，我在标记方面陷入了困境（想想“我该如何做这些？元素可以做到这一点？”），而不是回过头来看看我到底需要实现什么，或者稍微修改一下html来实现这一点。

我建议使用表格解决此问题。我有一个类似的问题，只要该表仅用于显示一些数据，而不是用于主页面布局就可以了。

将此行添加到浮动元素选择器

.floated {
    float: left;
    ...
    box-sizing: border-box;
}

这样可以防止将填充和边框添加到宽度中，因此即使您具有例如，元素也始终排在行中。三个元素的宽度为33.33333％

当用户水平减小窗口大小并导致浮动框垂直堆叠时，请移除浮动框，然后在第二个div（即浮动框）上使用margin-top：-123px（您的值）和margin-left：444px（您的值）将div放置在带有浮点的位置。这样，当窗口变窄时，右侧div会留在原处，而当页面太窄而无法包含它时，它会消失。...（对我而言）比在用户缩小浏览器窗口时将右侧div“跳转”到左侧div下方更好。

我解决这个问题的方法是使用一些jQuery。我这样做的原因是因为A和B是宽度百分比。

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：

.floatNoWrap
{
    width: 100%;
    height: 100%;
}

jQuery的：

$("[class~='floatNoWrap']").each(function () {
    $(this).css("width", $(this).outerWidth());
});