216

我想在同一行上有两个项目，float: left用于左侧的项目。

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

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

如何使用 CSS 告诉浏览器我宁愿拉伸包含div而不是包装它，这样float: right;div 就在float: left; div?

我想要的是：

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

10 回答 10

132

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

.parent {
     white-space: nowrap;
}

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

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

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

于 2012-04-02T14:26:44.120 回答
77

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

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

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

这有效，因为：

  • !important声明，结合使所有内容min-width在 IE7+ 中保持在同一行
  • IE6 没有实现min-width，但是它有一个错误，例如width: 100px覆盖!important声明，导致容器宽度为 100px。
于 2008-11-05T17:50:24.273 回答
15

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

无需 hack 或 HTML 表格。

于 2011-04-05T05:10:09.490 回答
11

解决方案1：

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

解决方案2：

表

（我讨厌黑客。）

于 2008-11-08T07:21:16.137 回答
8

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

于 2008-11-05T23:15:28.253 回答
4

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

在我的经验中经常遇到 CSS 困难，事实证明我看不到做我想做的事情的原因是我陷入了关于我的标记的隧道视野（思考“我怎样才能制作这些元素这样做？ ”），而不是回头看看我需要实现的究竟是什么，也许稍微修改我的 html 以促进这一点。

于 2008-11-05T17:54:47.870 回答
2

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

于 2010-07-26T16:03:39.153 回答
2

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

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

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

于 2017-03-30T10:18:58.487 回答
0

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

于 2015-05-25T04:56:27.540 回答
-3

我解决这个问题的方法是使用一些 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());
});
于 2013-05-18T20:38:33.473 回答