3

2 つのセルを持つ div テーブルがあります。今、私のページがスマートフォンに表示されているときに、ページの上部にある 2 番目のセルと下部にある最初のセルを表示したいと考えています。

<div class="table">
    <div class="cell1"></div>
    <div class="cell2"></div>
</div>

.table {
    display: table;
}

.table .cell1,
.table .cell2 {
    display: table-cell;
}

@media (max-width: 480px) {
    .table .cell1,
    .table .cell2 {
        width: 100%; // must be full width on smartphones
        display: block;
    }
    // how to display cell2 at top and cell1 at bottom?
}

float: leftや などのfloat プロパティを追加しようとしましfloat: rightたが、うまくいきません。

PS

テーブルレイアウトを削除してフロートのみを使用することはできません。デスクトップにテーブルとして表示する必要があるのには理由があります。

4

1 に答える 1

2

フレックスボックス モデルでこれを行うことができます。新しいフレックスボックス モデルはまだ広くサポートされていません(特に、仕様が最近変更されたため、古いブラウザーではサポートされていません) が、スマートフォンで動作することを意図していると述べているため、このソリューションでうまくいく可能性があります。

ほとんどのスマートフォン ブラウザはこのソリューションをサポートすると思います。よくわからないブラウザの 1 つは Windows Phone 8 のバージョンの IE10 です。IE10 はこのアプローチをサポートしていますが、Windows Phone 8 バージョンの IE10 が正確に動作するかどうかはわかりません。デスクトップ版と同じ。

さまざまな接頭辞が付いdisplayたプロパティ値とそれflex-directionを含む要素のプロパティを設定すると、コンテナが列方向のフレックス ボックスのように動作することが保証されます。

さまざまな接頭辞が付いたプロパティを on に設定するとorder、1onの初期値が上書きされる.cell1ことが保証されます。したがって、順序値がの順序値 (初期値の と同じまま) よりも高いため、順序が押し進められます。0.cell1cell1.cell2cell20

jsFiddleこれは、このアプローチのデモンストレーションです。

CSS :

.table {
    display: table;
}

.table .cell1, .table .cell2 {
    display: table-cell;
}

@media (max-width: 480px) {

    .table {
        display: -webkit-box;
        -webkit-flex-direction: column;
        display: -moz-box;
        -moz-flex-direction: column;
        display: -ms-flexbox;
        -ms-flex-direction: column;
        display: -webkit-flex;
        display: flex;
        flex-direction: column;
    }

    .table .cell2, .table .cell1 {
        width: 100%;
        display: block;
    }

    .table .cell1 {
        -webkit-box-ordinal-group: 2;
        -moz-box-ordinal-group: 2;
        -ms-flex-order: 1;
        -webkit-order: 1;
        order: 1;
    }
}
于 2013-05-21T02:15:36.563 に答える