前回の「九宮の基本配置」では、相対配置と絶対配置を使って九宮の基本配置を作成する方法を紹介しました。これは人間の慣性思考に沿った方法です。制作プロセスではすべてが当然のことのように思えますが、IE6 の忌まわしいパリティ BUG のせいで、このレイアウトには少し手が届かなくなりました。なぜなら、ほとんどの国内ユーザーは依然として IE6 を使用しており、これによってこれらのユーザーを失うことはできないからです。
現時点ではこのバグを解決する方法はなく、使用できるハックもありません。それを回避するしかありません。つまり、9 マスのグリッドの 4 隅のコンテナを配置したいのですが、これは以前の記事で使用した方法を完全に覆すことになります。改めて。
それでは、このバグを悲惨な状況から救うことができる他のテクノロジーは何でしょうか?左右浮動メソッドを使用すると、要素オブジェクトを正確にオフセットでき、このメソッドは IE6 のパリティ BUG も回避できることがわかっています。よし、使ってみましょう。
レイアウトのポイントと難しさ
引き続きテーブルの構造に従って新しいモデルの構造を構築しますが、今回は前の記事の構造とは異なります。このモデルで注意すべきポイントと困難は次の 2 点です。
1. 2 つの中間コンテナ t_m と b_m の幅の値はパーセンテージ値である必要があります。そうでない場合、9 正方形グリッド全体の左右の動的拡張は保証できず、固定ピクセル値であってはなりません。その幅は、コンテナの合計幅から角の 2 つのコンテナの幅の合計をパーセンテージで引いたものと等しくなります。計算式は次のとおりです。
t_m (または b_m) の幅 = (コンテナの合計幅 - (左上隅のコンテナの幅 + 右上隅のコンテナの幅)) / コンテナの合計幅
つまり、t_m や b_m の幅は 100% ではありませんが、実際には 2 つのコンテナ t_l と t_r の幅はピクチャの幅となるため、一般的には固定幅の値になります。同じ 3 つのコンテナでは、左側と右側の幅は固定値ですが、中央にはパーセンテージが必要で、これら 3 つのコンテナの幅の合計が 100% になるはずです。どうすればよいでしょうか。
ここでは、比較的安全な方法を使用して、中央のコンテナを理想的な幅のパーセンテージに達させます。
DIV コンテナを使用してそのパディングを設定できます: 0 10px; デフォルトでは、幅は 100% です。左右のパディング値が設定されているため、内部幅が必要な t_m の理想的な幅値となるため、その中にコンテナを定義し、このサブコンテナの幅を 100% に設定します。このサブコンテナの背景色は、左右に水平にタイル状に並べられた背景画像に設定できます。このサブコンテナは、使用する最上位のコンテナです。これは、幅の値に関する特別な要件を満たしています。
したがって、t_m の構造は次のような構造にすることができます。
ただし、この定義は別の問題を引き起こします。この問題は、パディングを定義しているため、下のボディ層の左側と右側にも生成されます。これは、なぜ影響するのかが不明瞭です。 IE7?
したがって、この問題を解決するには、IE6 と IE7 に対して HACK トリックを使用します。
.b_l{マージン左:0px;+マージン左:-10px;_マージン左:-10px;}
.b_r{margin-right:0px;+margin-right:-10px;_margin-right:-10px;}
この文は3つのブラウザに対して異なるオフセット値を設定し、指定された位置に対してb_lとb_rを左右にオフセットします。
2. 2 つのコンテナ b_l と b_r の高さの値は、背景色を垂直下に並べて表示できるように同じでなければなりません。これにより、中央のメインコンテンツ領域（コンテキスト）のコンテンツの高さが変化した場合でも、両側の背景色は常にメインコンテンツ領域（コンテキスト）と同じ高さを維持することができます。つまり、コンテンツ本体の高さに応じて高さを自由に伸ばすことができます。
この問題には、日常業務でよく使われる同じ高さの複数の柱を配置する方法を使用できます。この方法では、内側のパッチと負の外側パッチを組み合わせて使用し、複数の列で同じ高さを実現します。
.m_l,.m_r{パディング-ボトム:30000ピクセル;マージン-ボトム:-30000ピクセル;}
たとえば、m_l と m_r の下側の内側パッチの padding-bottom 値を比較的大きな値に設定します (任意の値に設定できます)。この高さの値を超えないようにしてください。次に、外側の下部パッチ (margin-bottom) を内側の下部パッチ (padding-bottom) の値と同じ負の値に設定し、元の位置に戻し、コンテナー (ボックス) の合計を overflow:hidden; に設定します。 2 つの柱が同じ高さになるように、余分な高さを切り落とします。
上記 2 つの難しい問題を解決したら、残りは簡単で楽しいです。 [カットページ]
構造層
前のケースに基づいて構造レイヤーを調整したので、次の構造になります。
引用した内容は以下の通りです。
コンテンツ本文領域 |
スタイルレイヤー
主なスタイル設定は次のとおりです。
引用した内容は以下の通りです。 /*コンテナの合計*/ .box{オーバーフロー:非表示;幅:50%;マージン:50px 自動 0;背景:#fff;} /*トップスタイル*/ /*中間スタイル*/ /*ボトムスタイル*/ |
8 枚の写真を使用して、美しい 9 正方形のグリッド ボックスを作成できます。それがどれほど完璧であるかを見てください。
このモデルは次のブラウザでテストされています。
IE5.5、IE6、IE7、IE8、FF3、TT、Maxthon2.1.5、Opera9.6、Safari4.0、Chrome2.0。
引用した内容は以下の通りです。 |