HTML 浮动右侧元素顺序

HTML float right element order

提问by newbie

If I have three elements flaoted to right, why order is following (see jsfiddle) element 1 is first element on right side, when element 3 is actually last element.

如果我有三个元素向右浮动，为什么顺序跟随（参见 jsfiddle）元素 1 是右侧的第一个元素，而元素 3 实际上是最后一个元素。

Order is now

订单是现在

[3] [2] [1]

But elements are in this order in html

但是元素在 html 中按此顺序排列

[1] [2] [3]

Why?

为什么？

http://jsfiddle.net/A9Ap7/

http://jsfiddle.net/A9Ap7/

回答by bookcasey

That 'inverted order' is the intended result.

那个“倒序”是预期的结果。

You can dig around in the CSS Specificationif you'd like, but your example renders as it ought to.

如果您愿意，您可以在CSS 规范中深入研究，但您的示例会按照应有的方式呈现。

If you'd like them to display in the same order as the markup, float the .containerright, its children left.

如果您希望它们以与标记相同的顺序显示，.container向右浮动，其子项向左浮动。

Updated jsfiddle

更新了 jsfiddle

回答by Quentin

The first element moves to the right, stops when it hits the edge of the container and allows the next element to move up to its left.

第一个元素向右移动，当它碰到容器边缘时停止，并允许下一个元素向上移动到它的左边。

The second element then does the same, except it stops when it hits the left edge of the first element.

然后第二个元素做同样的事情，除了它在碰到第一个元素的左边缘时停止。

… and so on.

… 等等。

回答by Andrew Luca

floatproperty starts it's analysis from the most right to most left.
ex:

float属性从最右边到最左边开始它的分析。
前任：

<div class="block block-1"></div>
<div class="block block-2"></div>
<div class="block block-3"></div>

with this rule:

有了这个规则：

.block {
    float: left;
}

block-3gets aligned to the left, we have: block-3, block-1, block-2
block-2gets aligned to the left, we have: block-2, block-3, block-1
block-1gets aligned to the left, we have: block-1, block-2, block-3

block-3向左对齐，我们有：block-3, block-1, block-2
block-2向左对齐，我们有：block-2, block-3, block-1
block-1向左对齐，我们有：block-1, block-2, block-3

with this rule:

有了这个规则：

.block {
    float: right;
}

block-3gets aligned to the right, we have: block-1, block-2, block-3
block-2gets aligned to the right, we have: block-1, block-3, block-2
block-1gets aligned to the right, we have: block-3, block-2, block-1

block-3向右对齐，我们有：block-1, block-2, block-3
block-2向右对齐，我们有：block-1, block-3, block-2
block-1向右对齐，我们有：block-3, block-2, block-1

If you want them float:rightin the right order: block-1, block-2, block-3
then you should swap them in markup

如果您希望它们float:right按正确的顺序排列：block-1, block-2, block-3
那么您应该在标记中交换它们

<div class="block block-3"></div>
<div class="block block-2"></div>
<div class="block block-1"></div>

UPDATE:Or wrap them all in a parent, and only float parent

更新：或者将它们全部包装在一个父级中，并且只浮动父级

回答by Faraz Kelhini

Using float or any other css property has no effect on html source code.

使用 float 或任何其他 css 属性对 html 源代码没有影响。

Any element that follows the floated element will flow around the floated element on the other side.

跟随浮动元素的任何元素都将围绕另一侧的浮动元素流动。

If you float an image to the left, any text or other elements following it will flow around it to the right. And if you float an image to the right, any text or other elements following it will flow around it to the left.

如果您将图像向左浮动，则其后的任何文本或其他元素将围绕它向右流动。如果您将图像向右浮动，则其后的任何文本或其他元素都会围绕它向左流动。

回答by IqbalHamid

This is because in your html, you have specified that [element 1] be displayed first aligned to the right. Hence this is exactly what the browser renders. When, in your html, you go on to display [element 2], floated to right, the browser does this BUT AFTER giving [element 1] priority of being displayed to the right as [element 1] came first in your HTML.

这是因为在您的 html 中，您已指定 [element 1] 首先向右对齐显示。因此，这正是浏览器呈现的内容。当在您的 html 中继续显示 [元素 2]，向右浮动时，浏览器会执行此操作，但在给予 [元素 1] 显示在右侧的优先级之后，因为 [元素 1] 在您的 HTML 中排在第一位。

Hope this makes sense.

希望这是有道理的。

回答by Andre Katov

If both elements set to float the same direction (in this case- right), the first one which appears in our HTML (not CSS!) be the one on the far side close to the edge.

如果两个元素都设置为向同一方向浮动（在本例中为右），则出现在我们的 HTML（不是 CSS！）中的第一个元素是靠近边缘的远侧的元素。