0

justify-content: space-between古い Flexbox 仕様 (私の場合はモバイル ブラウザー) を使用するブラウザー用に再作成する可能性はありますか? 2 つの要素を揃える必要がありました。1 つは左に、もう 1 つは右に配置しますが、フロートは使用しませんが、Flexbox を使用することをお勧めします。

新しいフレックスボックスを使用すると、次のことが簡単に実現できます。

<div class="two-columns">
    <span>1</span>
    <span>2</span>
</div>

CSS:

div { 
    display: -moz-flex;
    display: -webkit-flex;
    display: flex;
    -webkit-justify-content: space-between; 
    justify-content: space-between;
}

div span { 
    background: green;
    display: inline-block;
    color: white;
    padding: 20px 30px;
}

http://jsfiddle.net/R8bbz/1/

4

2 に答える 2

0

貧乏人のフレックスボックスのノックオフ

絶対配置を使用してフレックスボックス効果を模倣できます。

span要素に 2 つのクラスを追加します。

<div class="two-columns">
    <span class="left">1</span>
    <span class="right">2</span>
</div>

次の CSS を適用します。

div { 
    position: relative;
    outline: 1px dotted gray;
}

div span { 
    background: green;
    display: inline-block;
    color: white;
    padding: 20px 30px;
}  
div .left {
    position: absolute;
    left: 0; 
    top: 0;
}
div .right {
    position: absolute;
    right: 0; 
    top: 0;
}

デモ フィドル: http://jsfiddle.net/audetwebdesign/JxYwg/

画面サイズが非常に小さい場合は、ボックスが重ならないように、親コンテナーに最小幅を設定することをお勧めします。

フレックスボックスの仕様はまだかなり新しく、広くサポートされているわけではありません:

https://developer.mozilla.org/en-US/docs/Web/Guide/CSS/Flexible_boxes

マークアップを変更した場合、CSS table-cell を使用して同様の効果を得ることができます。

于 2013-08-21T01:11:03.450 に答える