Question

我有一个div，里面有一些内联元素。我想把其中一个元素放在左边，其余元素放在右边：

+---------------------------+
|+----+      +-----+ +-----+|
|| A  |      |  B  | |  C  ||
|+----+      |     | |     ||
|            |     | |     ||
|            |     | |     ||
|            +-----+ +-----+|
+---------------------------+

我尝试在BC和C上使用float:right但是会将它们从流中移除，使它们脱离容器：

+---------------------------+
|+----+      +-----+ +-----+|
|| A  |      |  B  | |  C  ||
|+----+      |     | |     ||
+------------|     |-|     |+
             |     | |     |
             +-----+ +-----+

如果没有将外壳从外部容器中溢出，最好的选择是什么？

编辑：大多数答案似乎建议使用overflow-auto或clear。他们之间有什么区别？我如何选择一个而不是另一个？而且，每个人似乎都认为我需要浮动元素。浮动是将东西放在右边的唯一方法吗？

Answer 1

浮动元素时，不计算父级的高度。您可以使用clearfix class，也可以使用clear floats using the overflow property。

您还可以在父div的末尾添加<div style="clear:both;"></div>，但这与上述解决方案的语义相差无几。

但是，您选择使用的是个人偏好。

您也可以尝试使用网格系统。您可以尝试960或Bootstrap。

Answer 2

一个简单的解决方案是将overflow:auto添加到容器中以解决此问题。这将导致容器展开以包含其浮动，但如果由于某种原因有人另外为容器设置了一个小高度，则会出现滚动条。

还有其他替代方案也有效，在其他情况下可能更好。有关问题的详细概述，请参阅this question及其第二个答案。

Answer 3

您需要清除这样的浮动元素：

<div style="clear: both;"></div>

My Fiddle

如果你不清楚它会是这样的：My Fiddle（漂浮不清除）

Answer 4

为了记录，有一个更好的（至少在我看来）这样做的方式比浮动快乐的clearfixing。使用display: inline-block。不足之处？ IE7当然不支持它。以下是IE8及以上版本以及Chrome，Firefox和Opera。

注意：我已经简化了演示的CSS，试图消除这种复杂的看法。不是。 display: inline-block是您需要的唯一部分;其余的是尝试匹配问题描述中描述的OP的一部分。

<div id="container">
    <div id="a">A</div>
    <div id="b">B</div>
    <div id="c">C</div>
</div>

#container {
    background: #ddd;
    text-align: center;
}
#container > div {
    background: #cff;
    display: inline-block;
    padding: 2%;
    height: 100px;
    width: 25%;
}
#container #a {
    height: 30px;
    margin: 0 10% 0 0;
}

http://jsfiddle.net/AZJzz/4

Answer 5

将此行放在其后：

<div style="clear:both;"></div>

这应该扩展它们所在的div以适应它们。

这是a live demo，用于说明如何操作。

Answer 6

目前浮动可能是获得理想结果的唯一方法。你也可以浮动父容器，但那时你必须给它一个宽度。此方法可以快速导致“float everything”布局，但它可以正常工作。 http://jsfiddle.net/mjzNP/

有没有办法让元素定位在右边而不将它们从流中移除？

6 个答案: