css - 960 GS の CSS レイアウトの問題

Question

960 GS を使用して次の CSS レイアウトを実現しようとしています。新聞記事のようなレイアウトです。ポジショニングに問題があることがわかりました。

私はあなたの親切な情報のために使用しています

   $ninesixty-grid-width: 978px;
   $ninesixty-columns:12;
   $ninesixty-gutter-width: 0px;
   $ninesixty-class-separator: "-";

テキスト内に画像がある新聞のようなレイアウトは実現できませんでした。これを実現するためのリンク、ポインタ、またはコードを教えてください。さらに詳しい情報が必要な場合はお知らせください

Answer 1

すでにグリッドを持っているかどうかはわかりませんでしたが、グリッド ジェネレーター サイトにアクセスして設定を入力すると、次のようになります。

最初にページ全体をラップしてcontainer-12から、レイアウト用に div で次のクラスを使用します。

ノート：

float の問題を回避するには、最初の grid-6 に両方の要素を配置する必要があると思います。他に考慮すべきことは、ガターがないため、要素が互いにきつくなるということです。設定を修正してガターを追加することをお勧めします。

通常、グリッド要素にパディングを追加しません。これは、幅を編集する必要があり、グリッド システムに反することを意味するためです。