如何让 CSS 浮动保持在一行？

Question

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

我独自实现这一点没有任何问题。 问题是，我希望这两个项目保持在同一行即使您将浏览器大小调整得非常小。 你知道...就像桌子一样。

目标是无论如何都让右侧的项目不被包裹。

如何使用 CSS 告诉浏览器我宁愿拉伸包含的 div 而不是包裹它，以便 float: right; div 位于下面float: left; div?

我想要的是：

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

Answer 1

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

.parent {
     white-space: nowrap;
}

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

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

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

Answer 2

将浮动

包裹在使用此跨浏览器最小宽度 hack 的容器

中：

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

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

这是有效的，因为：

• !important 声明与 min-width 相结合，导致所有内容在 IE7+ 中保持在同一行
• IE6 不实现 min-width code>，但它有一个错误，即 width: 100px 覆盖 !important 声明，导致容器宽度为 100px。

Answer 3

将浮动广告包裹在一个 div 中，其最小宽度大于浮动广告的宽度+边距之和。

无需修改或 HTML 表格。

Answer 4

解决方案一：

显示：表格单元格（未得到广泛支持）

解决方案2：

表

（我讨厌黑客。）

Answer 5

另一种选择：不要浮动右栏； 只需给它一个左边距，将其移到浮动之外即可。 您需要一两次破解才能修复 IE6，但这就是基本想法。

Answer 6

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

根据我的经验，CSS 经常遇到困难，事实证明，我看不到做我想做的事情的方法的原因是我对我的标记陷入了狭隘视野（思考“我怎样才能使 < em>这些元素做这个？”）而不是回去看看我到底需要实现什么，也许稍微修改我的html以促进这一点。

Answer 7

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

Answer 8

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

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

它将阻止填充和边框添加到宽度，因此元素始终保持在行中，即使您有例如。 宽度为 33.33333% 的三个元素

Answer 9

当用户水平缩小窗口大小并导致浮动垂直堆叠时，请删除浮动并在第二个 div（这是一个浮动）上使用 margin-top: -123px （您的值）和 margin-left: 444px （您的值）来将 div 放置在它们与浮动一起出现的位置。
这样做后，当窗口变窄时，右侧 div 会保持在原位，并在页面太窄而无法包含它时消失。 ...（对我来说）这比当用户缩小浏览器窗口时让右侧 div“跳”到左侧 div 下方更好。

Answer 10

我解决这个问题的方法是使用一些 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());
});