具有相同宽度的浮动元素

Question

具有相同宽度的浮动元素

4

我有三个div，并将第一个向左浮动。如果仅设置了浮动元素的宽度，则其他两个可以很好地包裹在其右侧。但是，如果我也为另外2个div设置了宽度，则它们不再围绕第一个元素环绕，而是像普通流一样垂直堆叠在下面。

我知道我需要给第2和第3个div添加相同的浮动类才能使它们内联浮动，但我很好奇，如果所有三个div都有宽度（即使宽度总和少于可用的浏览器窗口宽度），为什么会出现这种行为。以下是代码：

<!DOCTYPE html>
<html>

    <head>
        <style>
            .one {
                background-color: steelblue;
                padding: 10px;
                width: 200px;
            }
            .two {
                background-color: orange;
                padding: 10px;
                width: 200px;
            }
            .three {
                background-color: red;
                padding: 10px;
                width: 200px;
            }
            .float {
                float: left;
            }
        </style>
    </head>

    <body>
        <div class="one float">
            <p>I am paragraph one</p>
        </div>
        <div class="two">
            <p>I am paragraph two</p>
        </div>
        <div class="three">
            <p>I am paragraph three</p>
        </div>
    </body>

</html>

- Alan

嗯，我认为这里发生了不止一个缺陷。然而，我认为主要的“问题”在于边距折叠。 - nkmol

好像这更取决于div的内容而不是它们的大小 http://jsfiddle.net/979Tb/16/ - web-tiki

3个回答

1

为了解释清楚，div默认是块级元素。如果你没有清除第一个块后的float，它们仍然会影响容器。由于块级元素占据整个宽度，而float效果仍然存在，所以它们会围绕浮动的

包裹。清除

，你会看到一个不同版本 在这里满足你的好奇心。

- NoobEditor

谢谢，但这不是我要问的...问题是为什么如果所有三个div都设置了相同的宽度（在这种情况下为200px），但只有第一个div浮动，那么浮动就不起作用？如果我将div 1的宽度减小到小于div 2和3的宽度（例如50px），则div 2和3将围绕1换行。但我很好奇，为什么当它们都具有相同的宽度时，没有换行发生。还是谢谢 :) - Alan

0

你可以做到

div {
    display: inline-block;
}

目前它们默认是显示块。块的默认宽度为100%，这就是它们为什么会彼此下方出现的原因。

- CRABOLO

谢谢回复，但是即使我指定了宽度，那也不能覆盖默认的100%吗？如果我移除div 2和3的宽度（设置为100%），它们就可以正确地换行。更好奇的是，如果我明确为div 2和3设置宽度，为什么它们不会换行。 - Alan

网页内容由stack overflow 提供, 点击上面的

可以查看英文原文，
原文链接

- j08691 · Accepted Answer

这可能需要用一些图片来解释。首先，让我们去掉你的第三个div，因为它真的不需要来解释正在发生的事情。

当你浮动你的第一个div并且不给第二个div一个宽度时，你会得到这个：

第一个（浮动）div从正常流中取出，并沿其容器的左侧放置，文字和内联元素将围绕它包裹，就像浮动应该做的那样。实际上发生的是第二个div表现得好像它被放置在第一个div后面，就像你检查文档时所看到的那样：

注意第二个div不是从第一个div的右边缘开始的-它实际上存在于与第一个div相同的空间中（似乎是在它后面）；但是第二个div中的文本从第一个div结束的位置开始。然后，第二个div继续占据其容器的100%宽度，因为它是块级元素。只有div中的文本受到第一个浮动div的影响。

现在，如果我们在第二个div上设置一个宽度会发生什么？好吧，你会得到以下结果：

那么问题是，为什么在第二个div上设置宽度这么简单，看起来就无效了第一个div的浮动规则？嗯，不是这样的。以下是正在发生的情况。就像在第一个示例中一样，第二个div似乎存在于第一个div后面，但是这一次你明确地限制了文本存在的空间。再次如果我们在文档中突出显示第二个div，则会看到它占用的空间：

由于在此情况下你明确设置了200px的宽度，所以不存在浮动div右侧的空间来存在文本，因此文本被推到浮动div下方。以下是可能使所有内容更清晰的图像。假设我们将第二个div的宽度从200px增加到250px。然后我们得到这个：

现在，在第一个div的右边有空间，文本将开始并在水平上耗尽空间时下降到它的下面。继续增加第二个div的宽度，你将得到两个div的文本在水平上彼此相邻。

你应该从中了解到，在第二个div上设置宽度并没有破坏第一个div的浮动规则，只是限制了内容存在的空间量。