聖杯レイアウト_html/css_WEB-ITnose

聖杯レイアウトは古典的なレイアウトですが、二重飛行翼レイアウトもあります。どちらも習得する必要があります。

聖杯レイアウトの目標は、左右の列の幅を固定し、中央の行を流れるようにすることです。 1 つ目は HTML コードです (処理を容易にするために、ここでは位置の名前付け ID が使用されています。実際の操作では、ID の名前付けには意味論的な単語が使用されます):

<div id="header"></div><div id="container">  <div id="center" class="column"></div>  <div id="left" class="column"></div>  <div id="right" class="column"></div></div><div id="footer"></div>

1. 聖杯のレイアウトには、より数学的な計算が必要です。ここで、左の幅をX、右の幅をYとします。ここではパディングとマージンは考慮されません。

最初のステップは、コンテナのpadding-leftを左の幅に、padding-rightを右の幅に設定することです。 (画像は、左の幅が 200px、右の幅が 150px であると仮定して、別のリストから取得したものです)

#container{        padding-left:Xpx;        padding-right:Ypx;}

2 番目のステップは、各列の幅を設定することです。

#container .column{        float:left;}#center{        width:100%;}#left{        width:Xpx;}#right{        width:Ypx;}#footer{        clear:both;}

3番目のステップは、負のマージンを設定し、それがあるべき場所、つまり中央の左側に左に置くことです。

#left{        width:Xpx;        margin-left:-100%;}

4 番目のステップは、相対配置を使用し、その幅だけ独自の位置から距離を置き、左側のレイヤーをパディング左の位置に移動することです。

#container .column{        float:left;        position:relative;}#left{        width:Xpx;        margin-left:-100%;        right:Xpx;}    

5 番目のステップは、右のレイヤーをパディングの正しい位置に移動することです

真ん中の中央のレイヤーがストリーミングしているため、ウィンドウサイズを小さくするとIE6では値が無効になり、左側のレイヤーが遠くに移動してしまうので、元に戻す必要があります

#right{        width：Ypx;        margin-right:-Ypx;}

転載元: http:// blog.csdn.net/cui_angel/article/details/8306470