web-dev-qa-db-ja.com

視覚的および意味的に同じ順序を維持しながら、2つの要素を右にフロートさせる方法は？

要素の同じ順序を視覚的および意味的に維持しながら、ラッパー要素内の2つの要素を右側にフロートさせる方法は？

<style>
.container { widht: 200px; height: 50px; background: #333; }
.container p { width: 50px; height: 50px; background: #f00; float: right; margin: 0; }
</style>
<div class="container">
    <p class="a">Simon</p>
    <p class="b">Says</p>
</div>

レンダリングすると、内部要素が「SaysSimon」の順序で表示されます http://jsbin.com/eravan/1/edit 。

htmlcsssemantics
13
Gajus

一般的な修正は次のとおりです。

補助要素の追加

<style>
.container { width: 200px; height: 50px; background: #333; }
.container p { width: 50px; height: 50px; background: #f00; float: left; margin: 0; }
.container .aux { float: right; }
</style>
<div class="container">
    <div class="aux">
        <p class="a">Simon</p>
        <p class="b">Says</p>
    </div>
</div>

http://jsbin.com/eravan/6/edit

このアプローチの問題は、冗長な補助要素自体です。

セマンティクスを台無しにする

<style>
.container { width: 200px; height: 50px; background: #333; }
.container p { width: 50px; height: 50px; background: #f00; float: right; margin: 0; }
</style>
<div class="container">
    <p class="b">Says</p>
    <p class="a">Simon</p>
</div>

http://jsbin.com/eravan/9/edit

これは最悪の解決策であり、残念ながら最も一般的な解決策でもあります（ ALi Bassamコメント すぐ下でそれが証明されています）。

どちらも正解ではありません。

6
Gajus

親要素にdisplay: inline-block;を設定するときに、floatの代わりにtext-align: right;を使用することもできます。

http://jsbin.com/eravan/10/edit

12
miru87

ここではflexbox（要素の視覚的な並べ替えを含む）で多くの可能性があるため、採用するアプローチは周囲のコンテンツによって異なります。ただし、IEはそうではありません。バージョン10までサポートします。

http://caniuse.com/#feat=flexbox

.container {
    width: 200px;
    height: 50px;
    background: #333;
    display: flex;
}

.container.a {
    justify-content: flex-end;
}

.container p {
    width: 50px;
    height: 50px;
    background: #f00;
    margin: 0;
}

.container.b .a {
    margin-left: auto;
}

<div class="container a">
    <p class="a">Simon</p>
    <p class="b">Says</p>
</div>

<hr />

<div class="container b">
    <p class="c">Let's Play</p>
    <p class="a">Simon</p>
    <p class="b">Says</p>
</div>

http://jsfiddle.net/6NWmt/ （プレフィックスは含まれていません）

1
cimmanon

これを行う別の方法は、2つのクラスを絶対にして、それらの場所を指定することです。要素が固定サイズの場合、これは比較的簡単です。ちょっとした考え..

0
Mat Richardson