5

我遇到了一个问题，即右浮动元素没有与左浮动元素和居中元素保持相同的水平对齐方式。右侧浮动元素向右浮动，但位于其他元素所在的水平线下方。

当浮动元素（例如一左一居一右）在同一个 div 中时，右元素需要在左元素之前堆叠。

例子：

<div id=container>
    <div id="float-right"></div>
    <div id="margin-auto"></div>
    <div id="float-left"></div>
</div>

如果我只有两个元素，一个左一个右，它们水平放置，如下所示。

参见示例：jsfiddle

当我添加一个中心元素时，右元素会向下移动。

参见示例：jsfiddle

这里发生了什么？

4

4 回答 4

5

我将在这里为您提供一个简单的示例，假设您没有分配中间div值width，所以看看它实际上会做什么

演示

<div style="width:100%">
   <div style="width:20px;height:20px;background-color:red;float:left;border: 3px solid #000;"></div>
   <div style="height:20px;background-color:red;margin:0 auto auto;border: 3px solid #000;"></div>   
   <div style="width:20px;height:20px;background-color:red;float:right;border: 3px solid #000;"></div>
</div>

为什么会发生这种情况？

div是一个block-level元素，它占据页面上的整个水平空间，如果你知道，当你float有任何元素left或者right它不会再占用100%它时，它只会占用使用宽度分配的空间，或者它包含的内容，所以在这种情况下，left floated div将占用20px宽度，而其他空间未使用。现在你有另一个div不是浮动的，但它会占用剩余的可用水平空间，使你的right floated div元素向下推。

那么该怎么做才能解决这个问题呢？

您需要float全部div向左，或者如果您middle div float向左或向右可能就足够了。现在我知道你想让 2 div, 1 向左浮动，其他浮动向右，但这不是正确的方法，如果你愿意，你可以将元素包装在一个容器中div，或者你可以使用的是position: absolute;正确设置元素。

为了向您展示块级元素的工作原理，我将在这里分享另一个示例。

假设你有一个div嵌套在p标签内（这是无效的，所以请不要在现实世界中使用它，这只是为了演示目的），并给div元素一些宽度，看看它如何呈现你的文本。

<p>Hello World, I don't want the <div>text to</div> break</p>

div {
    width: 40px;
    background: #f00;
}

演示 2

尽管您提供了widthto 块级元素，但它仍然会破坏段落。

来自w3c

默认情况下，块级元素的格式不同于内联元素。通常，块级元素从新行开始，而行内元素则不然。

于 2013-07-27T21:23:44.053 回答
2

这是因为元素根据 HTML 规范浮动的方式。元素从左到右水平浮动。任何浮动元素都将出现在尽可能左的位置。

由于div是块级元素，它会将右侧的所有内容向下推，但与左侧的任何内容堆叠。

在您的示例中，您看不到它，但浮动或中心div一直延伸到页面边缘，如@Mr 所示。外星人的小提琴。

您可以在规范中阅读有关此内容的更多信息：

http://www.w3.org/wiki/Floats_and_clearing

于 2013-07-27T21:21:27.903 回答
1

div是一个块级元素，它使您的右下div推，因为它没有浮动，无论是在左侧还是在右侧，因此它将您的另一个推div到下方。

如果你也浮动它，它将使另一侧的其余空间空，因此它将允许浮动的右侧div坐在中间旁边div

http://jsfiddle.net/mSXX6/2/

于 2013-07-27T21:13:54.323 回答
0

如果你把两个浮动都放在非浮动 div 之上，你会得到你想要的。

于 2013-07-27T21:09:19.917 回答