Question

我在网页上有两个div，我希望它们都有一个固定的宽度，并希望第一个div浮动到第二个div的左边。

这听起来很简单，我以下Markup和CSS会给我想要的结果：

<div class="left">Content</div>
<div class="right">Content</div>

div.left {
    float: left;
    width: 200px;
}

div.right {
    width: 200px;

这不能按预期工作，而是在下一行显示正确的div，就像它没有浮动一样。在此示例网页中最好地解释了这一点：

Example of the Problem

我的问题是为什么这不能按预期工作？不是如何修复它。

注意：

在回答此问题之前，请确保您完全了解花车如何工作。
请确保您查看并了解示例。
这两个元素必须是块，而不是内联。
我了解所有修复/黑客工作。我想知道为什么它不起作用。
这似乎只能在Opera中正常使用。
需要使用文档备份答案。

Answer 1

在我看来，这是一个简单的规则，阻止，除非浮动，总是开始一个新的行。 w3.org/TR/CSS2/visuren.html#block-formatting第9.4.1节 -

Answer 2

 div.left {
     float: left;
     width: 200px;
    height:200px;
    background:red;
 }

 div.right {
    float:right;
     width: 200px;
     height:200px;
    background:blue;
}

请参阅http://jsfiddle.net/3kUpF/

或者，如果你想要它们并排，那么你可以漂浮：左边两个见http://jsfiddle.net/3kUpF/1/

Answer 3

浮动元素可以“流入”块元素，占据相同的行，但是将内容（而不是元素本身）推过。在这种情况下，左边是“内部”右边，但是右边的文本没有剩余空间，因此它位于下面。要查看我的意思，请尝试将右边的宽度设置为300px而不是200px - 您应该看到左边的“蓝色边框”，文本在其周围流动。为了“修复”这个问题，我建议给出一个左边的浮动或一个块内联的显示。

Answer 4

第二个元素应该是内嵌元素。

div.right {
    width: 200px;
    display: inline;
}

如果您不想将第二个元素设为内联，请将其浮动到左侧。但是你的容器会崩溃。您可以使用clear：

进行修复

<div id="container">
    <div class="left">Content</div>
    <div class="right">Content</div>
    <br style="clear:both"/>
</div>

div.left {
    float: left;
    width: 200px;
    border: 1px solid red;
}

div.right {
    width: 200px;
    border: 1px solid green;
    float:left;
}

#container{
    border: 1px solid black;
}

请参阅example

Answer 5

浮动两个div。

应用宽度为正的左边距（div.right），在您的情况下为200px。

应用宽度为负的左边距（div.left）+宽度（div.right），在您的情况下，200px + 200px = 400px。

div.left { float: left; width: 200px; margin-left: 200px; }
div.right { float: left; width: 200px; margin-left: -400px; }

Answer 6

您可以添加clear:both;个<p>代码。那样可以解决问题。不破坏（示例）页面的其余部分。

Answer 7

如果您希望两个容器彼此浮动，您可以使用span而不是div。这可能会导致问题结束。

为什么`float：left`不适用于固定宽度？

7 个答案: