如何将 CSS 浮动保持在一行中？答案

【问题标题】：How do I keep CSS floats in one line?如何将 CSS 浮动保持在一行中？
【发布时间】：2010-09-20 22:18:04
【问题描述】：

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

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

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

如何使用 CSS 告诉浏览器我宁愿拉伸包含 div 而不是包装它，以便 float: right; div 低于 float: left; div？ p>

我想要什么：

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

【问题讨论】：

如果 StackOverlow 添加一个小绘图小部件以便我们可以用鼠标制作这些图表，该有多酷？可能更适合以设计为导向的 SE 网站……但它仍然很棒。
@JoeCool UX SE 站点实际上已经有一个工具可以在其中创建模型。 meta.ux.stackexchange.com/questions/1291/…

标签： css css-float css-tables stretching

【解决方案1】：

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

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

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

【讨论】：

【解决方案2】：

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

.parent {
     white-space: nowrap;
}

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

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

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

【讨论】：

绝对是我见过的最好的解决方案。它适用于我的用例，但我想知道它的支持程度。幸运的是，在所有事情上使用浮点数正在慢慢成为过去。
您能解释一下这是如何工作的吗？或至少有任何链接？
@AnirudhanJ 这并不难。 Inline-block 使元素与内联文本正常流动（但保留了块的一些填充/边距功能），并且您 字面上 只是告诉 CSS 不要用空格包装文本: nowrap 选项（再次对孩子应用“正常”，以避免它传播到所有东西）
你如何让右边的 div 浮动到屏幕的右边呢？这只是将两个不会换行的内联块放在一起。
您也可以使用 letter-spacing: -3px （或任何适合您的值）来删除 inline-block 元素之间的空间。 PS：比公认的答案好；

【解决方案3】：

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

【讨论】：

【解决方案4】：

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

【讨论】：

CSS 框架？我必须为 ALL JavaScript 搜索使用 -jquery，并且由于完全无视质量，我们也必须开始使用 -jquery 显式搜索 CSS？做对或根本不做。

【解决方案5】：

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

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

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

之所以有效，是因为：

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

【讨论】：

这适用于两个花车，但不是三个。可以三个人用吗？？
唯一的问题是它强制固定最小宽度。
这不是一个解决方案，它只是一个最小宽度，当你的内容变得非常小（见问题）所以低于 100px 你有同样的问题。特别是对于表格单元格，这仍然是一个问题。
绝对令人震惊 - 立即解决了我的问题。我一直在一个简单的两列引导布局中解决这个问题，其中包含比我能说出的更多的盒子黑客，但这非常有效。感谢您解释为什么这项工作 - 令人着迷的东西，dom 是。
这可能适用于 div，但我只是用 ul/li 测试过它，它不起作用:(

【解决方案6】：

将您的浮动广告包裹在一个最小宽度大于浮动广告的组合宽度+边距的 div 中。

无需 hack 或 HTML 表格。

【讨论】：

【解决方案7】：

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

【讨论】：

【解决方案8】：

解决方案 1：

display:table-cell（不被广泛支持）

解决方案 2：

表格

（我讨厌黑客。）

【讨论】：

【解决方案9】：

另一种选择：不要浮动你的右栏；只需给它一个左边距以将其移动到浮动之外。您需要一两次 hack 来修复 IE6，但这是基本思想。

【讨论】：

【解决方案10】：

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

在我的经验中经常遇到 CSS 困难，事实证明，我看不到做我想做的事情的原因是我陷入了关于我的标记的隧道视野（想“怎么能我让这些元素做 this?" ），而不是回头看看我到底需要实现什么，并可能稍微修改我的 html 以促进这一点。

【讨论】：

好吧，它适用于几乎所有内容，现有布局基于它，我只是想解决当您将文本大小增加太多或调整浏览器窗口大小时布局中断的问题宽度小于 700 像素