1

私は友達の JavaScript を使って解決策を書いていますが、CSS の達人が私のためにもっと洗練された解決策を持っているのではないかと思っています。

私はそのような4つの列を持っています

| A | B | C | D|

画面の幅が約 1130px と少し窮屈になり始めたら、次の順序に変更します。

| B | C | D |
|     A     |

それらを圧縮する次の段階は次のようになります。

| B | C |
| A | D |

次に、よりモバイルなレイアウトの場合:

| C |
| B |
| D |
| A |

ちょっとクレイジーな面があることは知っていますが、それには十分な理由があります。列は基本的に、さまざまなタスク ステージ用です。そのため、プロジェクトの概要を見るときは、特定のカテゴリを最初に見るとよいでしょう。

jQuery を使用して div を個人的に移動する問題はありませんが、CSS を使用してコード化するとよいでしょう。

4

3 に答える 3

2

Twitter Bootstrap 3 のグリッド システムは非常に強力で、おそらく必要なものが得られるでしょう。

クラスを使用すると、このようなものになります（作成するには、ミックスインをlessで使用します。クラスをよりセマンティックに保ちます）。このJS Fiddleを参照してください

<div class="content">
    <div class="row">
        <div id="c" class="col-xs-12 col-sm-6 col-sm-push-6 col-md-4 col-md-push-4 col-lg-3 col-lg-push-6">C</div>
        <div id="b" class="col-xs-12 col-sm-6 col-sm-pull-6 col-md-4 col-md-pull-4 col-lg-3 col-lg-pull-0">B</div>
        <div id="d" class="col-xs-12 col-sm-6 col-sm-push-6 col-md-4 col-md-push-0 col-lg-3 col-lg-push-3">D</div>
        <div id="a" class="col-xs-12 col-sm-6 col-sm-pull-6 col-md-12 col-md-pull-0 col-lg-3 col-lg-pull-9">A</div>
    </div>
</div>

更新: 組み込みの LESS Mixin を使用していくつかのボーナス ポイントを獲得しています...これはおそらくもう少しうまくグループ化できますが、各アイテムを個別に読む方が簡単だと思います。

#a{
    .make-xs-column(12);
    .make-sm-column(6);
    .make-sm-column-pull(6);
    .make-md-column(12);
    .make-md-column-pull(0);
    .make-lg-column(3);
    .make-lg-column-pull(9);
}

#b{
    .make-xs-column(12);
    .make-sm-column(6);
    .make-sm-column-pull(6);
    .make-md-column(4);
    .make-md-column-pull(4);
    .make-lg-column(3);
    .make-lg-column-pull(0);
}

#c{
    .make-xs-column(12);
    .make-sm-column(6);
    .make-sm-column-push(6);
    .make-md-column(4);
    .make-md-column-push(4);
    .make-lg-column(3);
    .make-lg-column-push(6);
}

#d {
    .make-xs-column(12);
    .make-sm-column(6);
    .make-sm-column-push(6);
    .make-md-column(4);
    .make-md-column-push(0);
    .make-lg-column(3);
    .make-lg-column-push(3);
}

次に、HTMLは次のとおりです。

<div id="c">C</div>
<div id="b">B</div>
<div id="d">D</div>
<div id="a">A</div>
于 2013-09-20T18:51:18.997 に答える
2

列の高さがわからないと、少し難しいかもしれませんが、css メディア クエリ ( など@media screen and (max-width:1130px){...) と絶対配置を組み合わせて使用​​すると、探している効果を得ることができます。

開始するためのJSFiddle デモを次に示します。ブラウザーの幅を変更して、ブレーク ポイントをトリガーします (700、500、300 ピクセル幅で任意に設定)。

topただし、他の列の高さに基づいて一部の列の値を設定するには、javascript (または jQuery) が必要な場合があります。

于 2013-09-20T18:56:56.277 に答える
1

非常に簡単な解決策の 1 つは、コンテンツを複製し、画面の幅に応じて div を表示または非表示にすることです。したがって、マークアップは次のようになります。

<div id="container-desktop">
    <div class="col">A</div>
    <div class="col">B</div>
    <div class="col">C</div>
    <div class="col">D</div>
</div>

<div id="container-tablet">
    <div class="col">B</div>
    <div class="col">C</div>
    <div class="col">D</div>
    <div class="col">A</div>
</div>

<div id="container-phone">
    <div class="col">C</div>
    <div class="col">B</div>
    <div class="col">D</div>
    <div class="col">A</div>
</div>

CSS:

.col {
    width:25%;
    float:left;
    display:inline;
}
#container-tablet,
#container-phone {
    display:none;
}

@media all and (max-width: 768px) {

    .col { width:50% }

    #container-desktop {
        display:none;
    }

}
@media all and (max-width: 480px) {

    .col { width:100% }

    #container-tablet {
        display:none;
    }

}
于 2013-09-20T19:23:59.030 に答える