浮動小数点：正しい順番でHTMLコードに表示されます

Question

私はコンテナdivと2つの子divの両方をfloat: rightというプロパティで持っています。私は私のページに[ [A][B]]が表示されるはずです、意味的に

<div class="container">    .container {width: 50%} 
    <div class="a"></div>    .a, .b { float: right } 
    <div class="b"></div> 
</div> 

、それは私が、私はちょうど私のHTMLを並べ替えると、最初にBを置くことができることを得る [ [B][A]]

として表示：

私のコードは次のようになりますもし私が最初にAを見たいのであれば、それは本当は意味的に正しいわけではありません。これを行う適切な方法は何ですか？

Answer 1

あなたはフレキシボックスとjustify-content: flex-end;

.container { 
 
    background: #eee; 
 
    width: 50%; 
 
    display: flex; 
 
    justify-content: flex-end; 
 
}

<div class="container">    
 
    <div class="a">a</div> 
 
    <div class="b">b</div> 
 
</div>

それともdisplay: inline-block;に子divを設定し、右に整列するために、コンテナにtext-alignを使用を使用することができます。

.container { 
 
    background: #eee; 
 
    width: 50%; 
 
    text-align: right; 
 
} 
 
.container > div { 
 
    display: inline-block; 
 
}

<div class="container">    
 
    <div class="a">a</div><div class="b">b</div> 
 
</div>

、別の解決策は、子要素をラップする権利新しい要素をフロート、そして子供たちが左floatに新しい要素を導入することであろう。

.container { 
 
    background: #eee; 
 
    width: 50%; 
 
    text-align: right; 
 
    overflow: auto; 
 
} 
 
.inner { 
 
    float: right; 
 
} 
 
.inner > div { 
 
    float: left; 
 
}

<div class="container"> 
 
    <div class="inner"> 
 
    <div class="a">a</div> 
 
    <div class="b">b</div> 
 
    </div> 
 
</div>

Answer 2

右の最初の最後のdivでそれらを注文します、あなたの要素をフローティング。両方を浮かせてみてください。

.a, .b 
{ 
float: left; 
} 

Answer 3

.container { 
    width: 100%; 
} 
.container div { 
    float:right; 
    width: 50%; 
}