1

サイトのデザインに 960 グリッド システムを使用していますが、特定の列の背景色を変更できるようにしたいと考えています。次のようにして、コンテナ全体の背景色を変更する方法を見つけました

.container_12 {
  background-color: #000000;
  overflow: hidden; /* so that the margin is transparent */
}

ただし、たとえば列 1 ～ 3 だけの背景色を変更したい場合はどうすればよいでしょうか。容器の底まで色が行き渡るようにしたいです。

例。次のようなhtmlがあるとしましょう：

<div class="container_12">
  <div class="grid_4 alpha"> a </div>
  <div class="grid_4"> b </div>
  <div class="grid_4 omega"> c </div>
  <div class="grid_1 alpha"> A </div>
  <div class="grid_10"> B </div>
  <div class="grid_1 omega"> C </div>
</div>

列1〜3が特定の背景色になるようにスタイルを設定したい。これは、a div、A div の最初の 3 列、および B div の最初の 2 列がこの色になることを意味します。基本的に、グリッドではなく列のスタイルを設定したい。これは可能ですか？

4

3 に答える 3

1

私はそれを正しく理解しているかどうか確信が持てず、960gs フレームワークに慣れていません。パーセンテージに基づいて列のサイズが変更されると仮定しましたが、その場合、私のソリューションはうまくいくと思います。また、上から下に色付けされるように、コンテナの高さを固定する必要があります。

したがって、トリックは次のとおりです。

  • あなたのcontainer_12に、空を入れてください  
  • 高さを 100% に設定し、背景を何でも設定します
  • margin-right を設定して、その幅の正反対に等しくなるようにします

これを見てください http://codepen.io/joe/pen/bwBky

于 2012-12-28T02:20:31.943 に答える
1

ここで起こっていることは、グリッド システムに対するあなたの考えが、本来の使い方とはまったく異なっているということだと思います。私も最近グリッドシステムを使い始めたばかりなので、それはまったく問題ありません。

グリッド システムは、スタイルではなく、コンテンツの構造を提供することを目的としています。

.grid_4、.grid_8、および.grid_12は、セルではなく列を意味します。diva とA を最初の列に入れたいdiv場合は、それらを に次々と入れます.grid_4 alpha。

また、グリッド システムはスタイルを設定するためのものではないため、グリッド CSS のスタイル設定は避け、代わりに独自のスタイルを作成する必要があります。

したがって、HTML は次のようになります。

<div class="container_12">
  <div class="grid_4 alpha red-column">
    <div>Content-a</div>
    <div>Content-A</div>
  </div>
  <div class="grid_4 green-column">
    <div>Content-b</div>
    <div>Content-B</b>
  </div>
  <div class="grid_4 omega blue-column">
    <div>Content-c</div>
    <div>Content-C</div>
  </div>
</div>

そして、これを CSS に追加します。

.red-column {background-color:#f00;}
.green-column {background-color:#0f0;}
.blue-column {background-color:#00f;}
于 2012-12-28T08:33:24.100 に答える
1

次のようにできます。

.grid_4.alpha, .grid_1.alpha {
    background-color: blue;
}

.grid_4, .grid_10 {
    background-color: red;
}

.grid_4.omega, .grid_1.omega {
    background-color: green;
}

作業例: http://jsfiddle.net/fewds/tnMhc/

于 2012-12-28T01:36:49.893 に答える