Html 按从左到右的顺序向右浮动 div？
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/9280247/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Float div's to the right in left-to-right order?
提问by Jake Wilson
I have multiple div's I want to display in a horizontal row. Normally, the way I'd do this is to simply float them to the right and put them in the markup in reverse order like so:
我有多个 div，我想在水平行中显示。通常，我这样做的方法是简单地将它们向右浮动并以相反的顺序将它们放在标记中，如下所示：
<div>
<div style="float:right">Right</div>
<div style="float:right">Middle</div>
<div style="float:right">Left</div>
</div>
I'm trying to accomplish a similar thing, float div's to the right, but I can't reverse their order in the markup for SEO reasons. The left div needs to be first in the code.
我正在尝试完成类似的事情，将 div 浮动到右侧，但由于 SEO 原因，我无法在标记中颠倒它们的顺序。左边的 div 需要在代码中的第一个。
Is there a simple way to do this without resorting to positioning things absolutely?
有没有一种简单的方法可以做到这一点而无需绝对定位？
回答by Didier Ghys
You could apply a text-align: rightto the container and a display: inline-blockin place of the floating:
您可以将 atext-align: right应用于容器并使用 adisplay: inline-block代替浮动：
<div style="text-align: right">
<div style="display:inline-block">Left</div>
<div style="display:inline-block">Middle</div>
<div style="display:inline-block">Right</div>
</div>
回答by Nux
Using display:inline-blockmight not work as expected with elements of variable height.
display:inline-block对于可变高度的元素，使用可能无法按预期工作。
So you might want to use:
所以你可能想使用：
<div style="float: right">
<div style="float:left">Left</div>
<div style="float:left">Middle</div>
<div style="float:left">Right</div>
</div>
回答by llxxff
You could give float: rightto the outer div. And the display style of the inner div is inline-block
你可以给float: right外部div。而内部div的显示样式是inline-block
<div style="float: right" >
<div style="display:inline-block">Left</div>
<div style="display:inline-block">Middle</div>
<div style="display:inline-block">Right</div>
</div>
回答by Nick Beranek
Float your elements to the left.
将元素浮动到左侧。
<div>
<div style="float: left; position: relative; width: 200px;">Left</div> <!-- dummy width -->
<div style="float: left; position: relative; width: 200px;">Middle</div> <!-- dummy width -->
<div style="float: left; position: relative; width: 200px;">Right</div> <!-- dummy width -->
</div>
Also, you'll need to specify the widthfor each of these divs.
此外，您需要width为每个 div指定。
What is your reasoning behind floating them to the right?
您将它们向右浮动的理由是什么？
