0

1140px/12 カラム システム ( http://cssgrid.net/ ) を使用する場合、左側に 3 カラム、中央に 6 カラム、および 3 カラムになるサイト (オリジナル コンテンツの 1 ページ) を作成する必要があります。右側に。

左のストリップには、おそらく主に Treeview であるコントロールが含まれます。

"広大な" 中間セクションは Bing マップになります。

携帯電話やタブレットで表示するときは、地図が中央に固定されるようにする必要があります。

これは 1140/12 プロジェクトで動作しますか、それとも別の方向に目を向けるべきですか?

4

1 に答える 1

1

サンプルレイアウトの作成から始めて、そこで同じことを確実に話せるようにします。3 + 6+3グリッドの基本的なレイアウトは次のようになります。

<div class="container">
    <div class="row">
        <div class="threecol"></div>
        <div class="sixcol"></div>
        <div class="threecol"></div>
    </div>
</div>

widthパーセントで設定され、float: left;サイドバイサイドを表示するために適用された3つのdivがあります。次に、ウィンドウのサイズを768px未満の幅に変更します。メディアクエリが機能し始めます。このメディアクエリは、列からfloatを削除し、それぞれの幅の100％を占めるようにします。

つまり、短い答えではありません。中央の列は画面の中央に留まらず、画面の幅の100％を占める左の列の下に押し込まれ、画面の幅の100％も占めます。3番目の列も2番目の下に押し込まれ、幅の100％を占めます。

最初に表示されるように他の列の上部にマップを残す必要がある場合は、電話の左側の列を非表示にし、ライトボックスでクリックして開くメディアクエリを作成することをお勧めします。ユーザーはそれを必要とします。

それらを同じ画面に並べて配置する必要がある場合は、グリッド用に独自のクラスを作成する必要があります。

于 2013-02-23T16:44:10.030 に答える