15

視覚的および意味的に要素の同じ順序を維持しながら、ラッパー要素内の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 ）の順序で表示されます。

4

4 に答える 4

15

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

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

于 2013-01-26T15:03:40.043 に答える
10

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

補助要素の追加

<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 のコメントがそれを証明しています)。

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

于 2013-01-26T15:00:34.537 に答える
2

ここでは、フレックスボックス（要素の視覚的な並べ替えを含む）には多くの可能性があるため、採用するアプローチは周囲のコンテンツによって異なります。ただし、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/（プレフィックスは含まれていません）

于 2013-01-26T16:26:59.397 に答える
0

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

于 2013-01-26T15:17:43.583 に答える