右对齐页面右侧的3个div

Question

我正按照 signin_box - signin_btn - signin_opt 的顺序对齐3个div框。我目前的代码是使用 signin_box 交换 signin_opt 。我知道我可以在HTML代码中交换位置，但我想学习如何以正确的方式浮动。

.container {
    border-top: solid #27A7DF 3px;
    background-color: #000;
    height: 43px;
    width: 100%
}
.signin_box {
    height: 42px;
    width: 275px;
    float: right;
    background-color: #323232
}
.signin_btn {
    height: 42px;
    width: 72px;
    float: right;
    background-color: #000
}
.signin_opt {
    height: 42px;
    width: 135px;
    float: right;
    background-color: #323232
}

<div class="container">
    <div class="signin_box"></div>
    <div class="signin_btn"></div>
    <div class="signin_opt"></div>
</div>

Answer 1

当你向右移动兄弟姐妹时，HTML中首先指定的元素被推到最右边。要按照HTML指定的顺序保留元素，您需要将容器浮动到右侧，将子项浮动到左侧。

Answer 2

使用浮动时，订单很重要。尝试使用如下：

<div class="container"> 
    <div class="signin_opt"></div> 
    <div class="signin_btn"></div> 
    <div class="signin_box"></div> 
</div> 

Answer 3

您可能需要添加clear: right; CSS属性。

小提琴：jsFiddle demo

示例：

.signin_box {
    height: 42px;
    width: 275px;
    float: right;
    background-color: yellow;
    clear: right;
}