1

960 グリッドと adapt.js は初めてです。

私は概念を理解し、960 グリッドの実装に成功しました。私の問題は、「適応」部分の実装方法を理解していないことです。

これが私のコードです

<div class="container_12">
       <div id="container1" class="grid_3"></div><!--end grid_3 -->
       <div id="container2" class="grid_7"></div><!--end grid_7 -->
       <div id="container3" class="grid_2"></div><!--end grid_2 -->
</div><!--end container>

これは 1200.css ではうまく機能しますが、960.css では、container2 を grid_9 に、container 3 を次の「行」にドロップして grid_12 にしたいと考えています: この画像を参照してください: [適応例] https://docs .google.com/open?id=0BzR0r0y6_XGgMHZQNm9kcDJvNFU

<div class="container_12">
       <div id="container1" class="grid_3"></div><!--end grid_3 -->
       <div id="container2" class="grid_9"></div><!--end grid_9 -->
           <div class="clearfix"></div>
       <div id="container3" class="grid_12"></div><!--end grid_12 -->
</div><!--end container>

アダプティブがスタイルのオーバーライドを実行できることは知っていますが、

.foobar {
   /* Default styles here. */
 }

html.range_0 .foobar {
   /* Style overrides for: 0px to 760px */
}

html.range_1 .foobar {
  /* Style overrides for: 760px to 980px */
}

しかし、これはうまくいきませんよね？

どんなガイダンスも大歓迎です。

ありがとう。

4

1 に答える 1

0

同じコンテナーに 12 個を超えるグリッドを含めることはできません。以下の構造があるため、最初の例は機能しています。

grid_3
grid_7
grid_2

これは 12 ですよね？

あなたの他の例では、

grid_3
grid_9
grid_12

これは 24 に等しくなりますが、12 に等しくなければなりません。これは、操作する列が 12 しかないためです。グリッドは、コンテナ全体のパーセンテージです。打撃マークアップがある場合:

 <div class="container_12">
       <div class="grid_3"></div>
       <div class="grid_3"></div>
       <div class="grid_3"></div>
       <div class="grid_3"></div>
</div><!--end container>

各 grid_3 は、コンテナーの全幅の 25% です。

于 2012-09-22T10:08:22.360 に答える