我怎么保持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

包装你的漂浮 <div>s在一个容器 <div> 使用的这种交叉的浏览器分宽黑:

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

你的 可 还需要设置的"溢出"但大概不会。

这一工作，因为：

• 的 !important 《宣言》，并结合 min-width 因为一切都留在同一线路上在IE7+
• IE6没有实现 min-width, 但它有一个这样的错误 width: 100px 复盖 !important 《宣言》，造成容器的宽度是100像素.

Answer 2

另一个选择是，而不是浮动，将white-space属性nowrap设置为父div：

.parent {
     white-space: nowrap;
}

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

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

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

Answer 3

将漂浮物包裹在一个div中，其最小宽度大于漂浮物的总宽度+边距。

不需要黑客或HTML表格。

Answer 4

解决方案1：

显示：table-cell（不广泛支持）

解决方案2：

表

（我讨厌黑客。）

Answer 5

另一种选择：不要漂浮你的右栏;只需给它一个左边距将其移动到浮点之外。你需要一两个修复IE6，但这是基本的想法。

Answer 6

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

在我的经验中经常遇到CSS困难，事实证明我无法看到做我想要的事情的原因是我陷入了关于我的标记的隧道视野（思考<！> “我怎样才能让这些元素这个？<！>”;而不是回过头来看看我需要实现什么，也许重新修改我的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());
});