CSS3 Pre-Reference



box-ordinal-group

レイアウト順指定

試す

コード

#containe {
    display: -webkit-box;
    display: -moz-box;
}
#containe .left {
    box-ordinal-group: 3;
    -webkit-box-ordinal-group: 3;
    -moz-box-ordinal-group: 3;
}
#containe .center {
    box-ordinal-group: 2;
    -webkit-box-ordinal-group: 2;
    -moz-box-ordinal-group: 2;
}

サンプル

逆順で表示されていれば正しいです。
※サポートしていないブラウザでは動作しません。

左のボックス
真ん中のボックス
二列目
右のボックス
左のボックス
真ん中のボックス
二列目
右のボックス

コメントする


対応ブラウザ

Firefox
Chrome/Safari
3.0~
Opera
まだ
InternetExplorer
まだ

パラメータ

<整数>
初期値 1
適用 ボックス要素
継承 しない
レベル 3
%の解釈 -
適用メディア Visual
参考文献 Flexible Box Layout Module#3 Display order

解説

子要素のレイアウト順序を指定します。

数字の低いものから順に表示します。

トラックバック

投稿されたコメント