如何让CSS浮动在同一行？

Question

我想要使用float: left将两个项目放在同一行。

我单独设置这个没有问题。问题是，我想要这两个项目始终在同一行上，即使你将浏览器缩小到非常小。就像在表格中一样。

目标是让右侧的项目无论如何都不换行。

我如何使用CSS告诉浏览器，我宁愿拉伸包含的div而不是将其换行，以便float: right;的

仍然在float: left;的

下面？

我想要的：

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

- Jim Robert

---

如果StackOverflow增加一个小的绘图工具，让我们用鼠标画这些图表，那该有多酷啊！或许更适合面向设计的SE网站……但无论如何，这都将是令人惊叹的。 - JoeCool

@JoeCool，UX SE网站实际上已经拥有了一个创建模型的工具。http://meta.ux.stackexchange.com/questions/1291/how-do-i-add-mockups-and/or-visuals-to-my-questions - frank hadder

Answer 1

另一种选择是，不使用浮动而是将父级div的white-space属性设置为nowrap:

.parent {
     white-space: nowrap;
}

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

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

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

- Inserve

---

我看过的最佳解决方案。它适用于我的使用情况，但我想知道它的支持情况如何。幸运的是，对于一切都使用浮点数正在逐渐成为过去式。 - Ryan Ore

你能解释一下这是如何工作的吗？或者至少有相关链接吗？ - Anirudhan J

不难。inline-block让元素与行内文本一起正常流动（但保留了块级元素的一些填充/边距能力），然后你只需要告诉CSS不要使用white-space: nowrap选项来换行（再次将“normal”应用于子元素，以避免其向下传播到所有内容）。 - Brian

你怎么让右边的div浮动到屏幕右侧呢？这只是将两个inline-block放在一起，不会换行。 - addMitt

你也可以使用 letter-spacing: -3px（或任何适合您的值）来消除内联块元素之间的空格。 附注：比已接受的答案更好。 - Claudiu

Answer 2

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

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

您可能还需要设置"overflow"，但可能不需要。

这个方法可行的原因是：

• !important声明与min-width相结合，在IE7+中使所有内容保持在同一行上
• IE6不支持min-width，但它有一个bug，即width: 100px会覆盖!important声明，导致容器的宽度为100px。

- Eric Wendelin

---

唯一的问题是它强制固定最小宽度。 - Matt Montag

这不是一个解决方案，只是一个最小宽度，在你的内容变得非常小的时候（见问题），在100像素以下你会遇到同样的问题。特别是对于表格单元格，这仍然是一个问题。 - Sanne

如果CSS标准被修订以消除最小/最大尺寸的hack需求，那将是一个伟大的日子。 - Andy

@MattM。更不用说它不能保证适用于任意长度的内容。 - Andy

哇，当你不得不依赖于一个 bug 来确保跨浏览器兼容性时，你就知道协议需要更新了。 - ahnbizcad

Answer 3

将浮动元素包裹在这个div中，使该div的最小宽度大于浮动元素的总宽度和外边距之和。

无需使用hack或HTML表格。

- Czar

Answer 4

解决方案 1：

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

解决方案 2：

表格（tables）

（我讨厌hack。）

- pkario

Answer 5

另一个选项：不要使您的右侧列浮动；只需给它左边距以将其移动到浮动区域之外。你需要一些小技巧来修复IE6，但这就是基本想法。

- mrclay

Answer 6

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

根据我的经验，通常在CSS困难中，我发现我无法找到我想要的东西的原因是我在标记上陷入了一种隧道视野（思考“我如何使这些元素做这个？”），而不是回头看看我需要实现什么，也许稍微重新调整我的HTML以便实现那个目标。

- glenatron

---

它可以适用于几乎所有的东西，现有的布局也是基于它的，我只是试图修复一个问题，即当你将文本大小增加太多或调整浏览器窗口小于700像素宽时，布局会出现问题。 - Jiaaro

Answer 7

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

- Rob Elliott

Answer 8

将这行代码添加到您的浮动元素选择器中。

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

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

- Nebojsha

Answer 9

当用户水平缩小窗口大小时，导致浮动垂直堆叠，移除浮动并在第二个 div（原来是浮动）上使用 margin-top: -123px（您的值）和 margin-left: 444px（您的值）来定位 div，使它们像浮动一样显示。

以这种方式完成后，当窗口变窄时，右侧的 div 保持在原地，并在页面太窄无法包含它时消失。... 对我来说，这比当用户通过缩小浏览器窗口时，右侧的 div “跳”到左侧 div 下面更好。

- Bruce Allen

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());
});

- ScubaSteve

---

有关 CSS 的一个框架？我必须在 所有 JavaScript 搜索中使用 -jquery，并且由于对质量的完全漠视，我们不得不开始使用 -jquery 明确搜索 CSS？要么做对，要么就别做。 - John