3

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

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

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

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

将东西放在右边而不让它们溢出外部容器的最佳选择是什么？

编辑：大多数答案似乎建议使用溢出自动或清除。它们之间有什么区别？我如何选择一个而不是另一个？此外，每个人似乎都认为我需要浮动元素。浮动是把东西放在右边的唯一方法吗？

4

6 回答 6

3

当您浮动元素时，不会计算父级的高度。您可以使用clearfix 类，也可以使用溢出属性清除浮点数。

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

但是，您选择使用什么实际上是个人喜好。

此外，您可能想尝试使用网格系统。您可以尝试960或Bootstrap。

于 2012-07-29T13:14:50.947 回答
3

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

还有其他替代方案也有效，并且在其他情况下可能会更好。请参阅此问题及其第二个答案，以获得对该问题的良好概述。

于 2012-07-29T13:21:41.493 回答
2

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

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

我的小提琴

如果你不清除它会是这样的：我的小提琴（浮动未清除）

于 2012-07-29T13:27:35.237 回答
2

作为记录，有比浮动快乐清除修复更好的（至少在我看来）方法。使用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

于 2012-07-29T13:53:40.597 回答
1

将此行放在它后面：

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

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

这是一个现场演示，以说明如何做到这一点。

于 2012-07-29T13:24:04.753 回答
0

目前浮动可能是获得所需结果的唯一方法。你也可以浮动父容器，但是你必须给它一个宽度。这种方法可以快速导致“浮动一切”布局，但它确实有效。http://jsfiddle.net/mjzNP/

于 2012-07-29T13:41:14.997 回答