4

私は3列のレスポンシブデザインに取り組んでいます。700px未満の画面サイズの場合、すべての列幅を100％に設定することにより、列はHTMLに表示される順序（div1、div2、div3）で互いに重なり合うようにジャンプします。

メディアクエリで異なる順序で表示されるようにdivを設定するにはどうすればよいですか？

divは、流動的な12列のグリッドに基づいており、左右の列が狭く、中央の列が広くなっています。それらはすべて左に浮いているので、マークアップ順に表示します。ただし、中央の列にはメインコンテンツが含まれ、左側と右側の列にはサポート情報が含まれています。したがって、レイアウトが単一の列に移動したら、左右のdivを中央のdivの下に表示する必要があります。私はこれに間違って近づいていますか？

これがマークアップです...

<div class="container">
  <div class="row">
    <div class="threecol">
      <p>Column 1</p>
    </div>
    <div class="sixcol">
      <p>Column 3</p>
    </div>
    <div class="threecol last">
      <p>Column 3</p>
    </div>
  /div>
</div>

.row {
width: 100%;
max-width: 1140px;
min-width: 701px;
margin: 0 auto;
overflow: hidden;
}

.threecol, .fourcol {
margin-right: 3.8%;
float: left;
min-height: 1px;
}

.row .threecol {
width: 22.05%;
}

.row .fourcol {
width: 30.75%;
}

.last {
margin-right: 0px;
}

@media handheld, only screen and (max-width: 700px) {

.row, body, .container {
width: 100%;
min-width: 0;
}

.row .threecol, .row .fourcol {
width: auto;
float: none;
}

}
4

2 に答える 2

10

私は今これに対する解決策を見つけました。

私はenquire.jsを使用してjavascriptでメディアクエリをシミュレートし、次にjQuery .insertBefore（）と.insertAfter（）を使用してdivの順序を切り替えました。

これはおやつでした。

コードは次のとおりです。

<div class="container">
    <div class="row">
        <div class="threecol" id="tertiary-col">
            <p>Column 1</p>
        </div>
        <div class="sixcol" id="main-col">
            <p>Column 3</p>
        </div>
        <div class="threecol last" id="secondary-col">
            <p>Column 3</p>
        </div>
    </div>
</div>

<script type="text/javascript">
    enquire.register("screen and (max-width:850px)", {
        match : function() { 
                $('#tertiary-col').insertAfter('#secondary-col');
        },
        unmatch : function() {
                $('#tertiary-col').insertBefore('#main-col');
        }
    }).listen();
</script>
于 2012-10-25T14:20:55.933 に答える
-1

将来的には、これが最適なFlexboxを使用することをお勧めします。ただし、確実にサポートされているわけではないため、私が知っている最善のオプションは、appendAround jQueryプラグインを使用して、メディアクエリに基づいて左側の列を別のコンテナdivに移動することです。

于 2012-10-22T23:17:44.043 に答える