前回の「九宮の基本配置」では、相対配置と絶対配置を使って九宮の基本配置を作成する方法を紹介しました。これは人間の慣性思考に沿った方法です。制作プロセスではすべてが当然のことのように思えますが、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 の構造は次のような構造にすることができます。
<div class="top"><span class="t_m"></span></div>
ただし、この定義は別の問題を引き起こします。この問題は、パディングを定義しているため、下のボディ層の左側と右側にも生成されます。これは、なぜ影響するのかが不明瞭です。 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 つの難しい問題を解決したら、残りは簡単で楽しいです。 [カットページ]
構造層
前のケースに基づいて構造レイヤーを調整したので、次の構造になります。
引用した内容は以下の通りです。 <div class="box">
<!--最初の行—先頭*/-->
<div class="top"><span class="t_m"></span></div>
<span class="t_l"></span>
<span class="t_r"></span> <!--2 行目 - 中央のコンテンツ領域*/-->
<span class="m_l"></span>
<span class="m_r"></span>
<div class="context">コンテンツ本文領域</div> <!--3 行目 - 下*/-->
<div class="b_m"><span></span></div>
<span class="b_l"></span>
<span class="b_r"></span>
</div> |
スタイルレイヤー
主なスタイル設定は次のとおりです。
引用した内容は以下の通りです。 /*コンテナの合計*/ .box{オーバーフロー:非表示;幅:50%;マージン:50px 自動 0;背景:#fff;}
.box スパン{表示:ブロック;} /*トップスタイル*/
.top{高さ:10px;パディング:0 10px;}
.t_l,.t_r{幅:10px;高さ:10px;フォントサイズ:0%;マージントップ:-10px;}
.t_l{float:left;background:#ff0000;}/*左上隅*/
.t_r{float:right;background:#ff0000;}/*右上隅*/
.t_m{height:10px;font-size:0%;width:100%;background:#7F0000;}/*これは左右に拡張できる領域です。どちらの場合も、配置するための空白スペースを残しておきます。左隅と右隅のコンテナ*/ /*中間スタイル*/
.m_l,.m_r{width:10px;padding-bottom:30000px;margin-bottom:-30000px;}/*同じ高さの 2 つの列*/
.m_l{float:left;margin-left:0px;+margin-left:-10px;_margin-left:-10px;background:#7F0000;} /*左境界線*/
.m_r{float:right;margin-right:0px;+margin-right:-10px;_margin-right:-10px;background:#7F0000;} /*右枠*/ /*ボトムスタイル*/
.b_m{padding:0 10px;height:10px;}/*これは左右に拡張できる領域です。どちらの場合も、左右の列に同じ高さのコンテナを配置するための空白スペースを残します。
.b_m スパン{幅:100%;高さ:10px;フォントサイズ:0%;背景:#7F0000;}
.b_l,.b_r{高さ:10px;フォントサイズ:0%;幅:10px;余白上部:-10px;}
.b_l{float:left;background:#ff0000;}/*左下隅*/
.b_r{float:right;background:#ff0000;}/*右下隅*/ |
上記の設定後、9 正方形のグリッドが完成します。これは「壊れない」もので、コンテンツ本体の幅と高さに応じて動的に全方向に伸縮します。このモデルでは、デモンストレーションの目的で、コンテナ全体の幅を 50% の割合に設定します。実際のニーズに応じてサイズを調整でき、コンテナの内部は幅の値に従って領域全体を自動的に埋めます。親コンテナをバーストします。以下に示すように:
8 枚の写真を使用して、美しい 9 正方形のグリッド ボックスを作成できます。それがどれほど完璧であるかを見てください。
このモデルは次のブラウザでテストされています。
IE5.5、IE6、IE7、IE8、FF3、TT、Maxthon2.1.5、Opera9.6、Safari4.0、Chrome2.0。
引用した内容は以下の通りです。 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<頭>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>壊れない 9 マスのグリッド レイアウト (http://www.cnblogs.com/binyong)</title>
<style type="text/css">
/*
レイアウト名: Unbreakable Nine Palace Grid
著者: 冰季峰
ブログアドレス: http://www.cnblogs.com/binyong
*/
*{マージン:0;パディング:0;フォントサイズ:12px;}
body{text-align:center;color:#fff;}/*ie5.5 はマージンの中央揃えをサポートしていません*/
/*コンテナの合計*/
.box{オーバーフロー:非表示;幅:50%;マージン:50px 自動 0;背景:#fff;}
.box スパン{表示:ブロック;}
/*トップスタイル*/
.top{高さ:10px;パディング:0 10px;}
.t_l,.t_r{幅:10px;高さ:10px;フォントサイズ:0%;マージントップ:-10px;}
.t_l{float:left;background:#ff0000;}/*左上隅*/
.t_r{float:right;background:#ff0000;}/*右上隅*/
.t_m{height:10px;font-size:0%;width:100%;background:#7F0000;}/*これは左右に拡張できる領域です。どちらの場合も、配置するための空白スペースを残しておきます。左隅と右隅のコンテナ*/
/*中間スタイル*/
.m_l,.m_r{width:10px;padding-bottom:30000px;margin-bottom:-30000px;}/*同じ高さの 2 つの列*/
.m_l{float:left;margin-left:0px;+margin-left:-10px;_margin-left:-10px;background:#7F0000;} /*左境界線*/
.m_r{float:right;margin-right:0px;+margin-right:-10px;_margin-right:-10px;background:#7F0000;} /*右枠*/
/*ボトムスタイル*/
.b_m{padding:0 10px;height:10px;}/*これは左右に拡張できる領域です。どちらの場合も、左右の列に同じ高さのコンテナを配置するための空白スペースを残します。
.b_m スパン{幅:100%;高さ:10px;フォントサイズ:0%;背景:#7F0000;}
.b_l,.b_r{高さ:10px;フォントサイズ:0%;幅:10px;余白上部:-10px;}
.b_l{float:left;background:#ff0000;}/*左下隅*/
.b_r{float:right;background:#ff0000;}/*右下隅*/
/*コンテンツエリア*/
.context{背景:#D45F00;}
h3{text-align:center;font-size:14px;width:80%;margin:0 auto;line-height:26px;}
p{line-height:22px;padding:0 20px;text-align:left;}
a:リンク、a:訪問済み{色:#fff;フォントの太さ:太字;}
a:ホバー{色:緑;}
</スタイル>
</head>
<本文>
<div class="box">
<BGSOUND CEP="5" />
<div class="top"><span class="t_m"></span></div>
<span class="t_l"></span>
<span class="t_r"></span>
<BGSOUND CEP="6" />
<span class="m_l"></span>
<span class="m_r"></span>
<div class="context">
<h3>壊れない 9 マスのグリッド レイアウト</h3>
<p>これは 9 正方形のグリッド レイアウト モデルです。画像は読み込まれていません。9 正方形のグリッドが自由に伸縮することがわかります。 </p>
<p>このモデルは、IE6 の幅と高さの奇妙な 1px バグを回避するフローティング メソッドを使用して、以前のバージョンの欠点を修正しており、すべての主流ブラウザと完全に互換性があります。 </p>
<p>このモデル テストは、次のブラウザで完全に合格しました:</p>
<p>IE5.5、IE6、IE7、IE8、FF3、TT、Maxthon2.1.5、Opera9.6、Safari4.0、Chrome2.0。 </p>
<p style="text-align:right">その他のオリジナル作品については、次のサイトをご覧ください: <a href="http://www.cnblogs.com/binyong" title="Web サイトにアクセス">Bingjifeng ブログ</ a></p>
<p style="text-align:right">ブログのアドレス: http://www.cnblogs.com/binyong</a></p>
</div>
<BGSOUND CEP="7" />
<div class="b_m"><span></span></div>
<span class="b_l"></span>
<span class="b_r"></span>
</div>
</body>
</html> |
この記事へのリンク: http://www.blueidea.com/tech/web/2009/6805.asp
