4

私はdivを1、2、3 ... htmlレイアウトとしてソートしています

HTML:

<div class="bigdiv">
    <div class="div1">div 1</div>
    <div class="div2">div 2</div>
    <div class="div3">div 3</div>
</div>

CSS:

.div1 {
    float: left; 
}

.div2 {
    float: left;     
 }

 .div3 {
    float: left;     
 }

CSSでdivをこのレイアウトに並べ替えるにはどうすればよいですか

<div class="bigdiv">
    <div class="div3">div 3</div>
    <br>
    <div class="div1">div 1</div>
    <div class="div2">div 2</div>
</div>

CSS による (float、:after、:before)

私の試み：

.div3 {
    float: right; 
} 
.div3:before {
    content: '\A\A';
    white-space: pre;
}

前もって感謝します。

4

4 に答える 4

11

CSS フレキシブル ボックス レイアウト モジュールでこれを行うことができます。

'order' プロパティは、フレックス アイテムを序数グループに割り当てることで、フレックス コンテナー内でフレックス アイテムが表示される順序を制御します。

フレックス コンテナは、最も小さい番号の序数グループから順にコンテンツをレイアウトします。同じ順序グループ​​を持つ項目は、ソース ドキュメントに表示される順序で配置されます。これは、文書内で要素が並べ替えられたかのように、描画順序 [CSS21] にも影響します。( W3.org )

フィドル

CSS (ブラウザ仕様なし)

.bigdiv {

    display: flex;
    flex-direction: row;
    }

.div1 {
    order: 2;
 }

.div2 {
    order: 3;
 }

.div3 {
    order: 1;
 }
于 2013-08-01T07:33:42.530 に答える