0

私は960グリッドシステムを使用しています。次のようなことを達成しようとしています-

|-----| |-------------------|
|     | |  |--|  |-----|    |
|     | |  |  |  |     |    |
|     | |  |--|  |-----|    |
|     | |                   | 
|     | |  |------|  |--|   |
|     | |  |      |  |  |   |
|     | |  |------|  |--|   |
|-----| |-------------------|

そうする方法はありますか？右の列に2番目のdivのセットが必要な唯一の理由は、左の列が非常に長く、2番目の列のセットの間にスペースが必要ないためです。

これを達成するためのより良い方法があれば、私は本当にどんなガイダンスでもありがたいです。

4

2 に答える 2

2

この機能は、Grid960システムに組み込まれています。左右のネストされたグリッドアイテムに、それぞれ「アルファ」と「オメガ」のクラスを指定するだけです。

次に例を示します。

<div class="container_12">

  <div class="grid_3">
  </div>

  <div class="grid_9">

    <div class="grid_4 alpha">
    </div>

    <div class="grid_5 omega">
    </div>

    <div class="grid_5 alpha">
    </div>

    <div class="grid_4 omega">
    </div>

  </div>

</div><!-- end .container_12 -->
于 2012-12-08T06:57:36.870 に答える
0

他のフレームワークを検討する場合は、CascadeFrameworkを使用して目的の結果を達成する方法を次に示します。

<div class="site-center"> <!-- Center all content in a responsive container -->
    <div class="col width-1of4"> <!-- Your left column goes here -->

    </div>
    <div class="col width-fill"> <!-- Your main content goes here -->
        <div class="col"> <!-- First row -->
            <div class="col width-1of3"> <!-- First element of first row -->

            </div>
            <div class="col width-fill"> <!-- Second element of first row -->

            </div>
        </div>
        <div class="col"> <!-- Second row -->
            <div class="col width-2of3"> <!-- First element of second row -->

            </div>
            <div class="col width-fill"> <!-- Second element of second row -->

            </div>
        </div>
    </div>
</div>

カスケードフレームワークのグリッド要素は次のいずれかです

  • 次のHTML要素のいずれか：section、main、article、header、footer、aside、またはnav（これらの要素は、必要に応じて古いIEのHTMLshivでポリフィルされます）。

  • 'col'クラスを持つdiv要素（ポリフィルなしで古いIEで使用できます）。

グリッド要素に幅を追加するには、「width-XofY」形式のクラスを追加します。ここで、Yは2、3、4、5、6、7、8、9、10、12、16、または24であり、 Xは、Xよりも小さい任意の値にすることができます。

より具体的には、Cascade Frameworkで使用できる有効なクラスの例を次に示します。「width-1of2」（幅：50％）、「width-3of4」（幅：25％）、「width-2of5」（幅：40 ％）、'width-2of5'（幅：40％）、'width-2of7'（幅：28.5714286％）、および'width-13of16'（幅：81.25％）

これらのクラスに加えて、コンテンツにそれぞれ適合し、100％の幅の残りを埋めるクラス「width-fit」および「width-fill」を使用することもできます。または、独自のクラスとIDを定義し、それらのクラスにカスタム幅を追加して、「セマンティック」な方法で処理を実行することもできます。

ビルドに応答性モジュールが含まれている場合（推奨ビルドの場合）、モバイルではすべてのグリッド要素の幅が自動的に100％にリセットされます。「mobile-width-3of16」、「phone-width-3of7」、「tablet-width-2of4」などのクラスを使用して、さまざまな幅の範囲とクラス「desktop-hidden」、「mobile-hidden」のレイアウトをカスタマイズできます。 、'phone-hidden'または'tablet-hidden'は、範囲のある特定の画面のコンテンツを非表示にします。

于 2014-01-07T19:42:19.527 に答える