4

私たちのウェブサイト エンジンは 960.gs グリッド システムを使用しており、固定 (100px) - 流動 (最大幅) - 固定 (100px) ビューの 3 列に変更しようとしています。残念ながら、すべての 960.gs オンライン ジェネレーターは、完全固定または完全流動グリッドを作成します。したがって、最初に生成された完全な流体グリッドをこのビューに変更しようとしています:

<------------100%--------------->

======== =============== ========
| fixed| |max to screen| |fixed |
======== =============== ========

<-100px>                 <-100px>

コード (変更後): http://jsfiddle.net/vZm8x/

  • 問題 1) 中央のコンテンツ エリアを画面の左側に最大化する方法がわかりません。width:auto; width:100% はまったく機能しません。div をラップするだけです。
  • 問題 2) すべての div を 100px に修正した後、何かをラップし続けます。(display:inline; アイデアの助けにはなりませんか?)

私の質問は次のとおりです。必要に応じて 960.gs テンプレートを変更することは可能ですか? はいの場合、問題を解決するためのアドバイスをお願いします。前もって感謝します！

4

1 に答える 1

2

固定幅のサイドカラムを使用すると、実際には非常に簡単です。あなたはフロートを使いたいと思うでしょう、そしてあなたの特定のデザインの必要性に応じて、偽の柱のトリックをする必要があるかもしれません。

次のようなものが必要になります。

<div class="left"></div>
<div class="right"></div>
<div class="middle">Content</div>

と：

div {
    /* border-box, to make sure "width" is our intended width */
    -moz-box-sizing: border-box; /* Firefox still uses prefix */
    box-sizing: border-box;
}

.left {
    float: left;
    width: 100px;
    background: #f00;
}

.right {
    float: right;
    width: 100px;
    background: #00f;
}

.middle {
    width: 100%;
    padding: 0 100px;
    background: #ccc;
}

ここで実際の動作を確認してください（これにはフェイクカラム効果はありませんが、出発点になるはずです）。出力でセクションの幅を変更すると、列が配置されたままになり、コンテンツが外側の列の境界内にとどまることがわかります。

コンテンツ列はまだドキュメントフローにあるため、最後にする必要があります。そのため、右側の列はコンテンツの下に表示されます。

position: absolute;または、サイドコラムで次のように使用することもできます。

.wrapper {
  position: relative; /* Constrains the columns within their parent. Not needed if parent is <body> */
}

.left {
  position: absolute;
  top: 0;
  left: 0;
}

.right {
  position: absolute;
  top: 0;
  right: 0;
}

.middle {
  padding: 0 100px;
}

div {
  -moz-box-sizing: border-box;
  box-sizing: border-box;
}

これらのトリックは、IE8 +、Firefox、Chrome、Safari、およびOperaで機能します。box-sizingIE7は、W3Cボックスモデル（「コンテンツボックス」）を使用し、 CSSを認識しないために問題が発生する可能性がありますが、必要に応じて動作させるためのいくつかのトリックがあります。IE6は、デフォルトで「ボーダーボックス」ベースのボックスモデルを使用しているため、問題ないはずです。z-index（ IEを動作させるには、さまざまな操作が必要になる場合があります。その場合は、左右の列を設定.middle{ position: relative; z-index: 1}して追加します。）z-index: 2

このposition: absoluteトリックには、サイドバーをコンテンツdivの前または後に表示できるという点で、floatのものよりも優れているため、よりセマンティックなオプションになる可能性があります。

これらの作業の理由は、a）サイド列が固定されているため、パディングをそれらの列の幅に設定し、b）ドキュメントフローから要素を削除するためですposition: absolute。float: [left/right]つまり、ドキュメントに関する限り、 、それらはそこになく、スペースを取りません。これにより、他の要素を以前の場所に移動して、それらを互いに重ねることができます。

于 2013-03-04T14:18:29.797 に答える