CSS レイアウト 聖杯レイアウト & 両翼レイアウト_html/css_WEB-ITnose

WBOY
リリース: 2016-06-24 11:45:54
オリジナル
1649 人が閲覧しました

実際のところ、聖杯レイアウトと両翼レイアウトを実現する目的は、左右の列の幅を固定し、中央部分を調整することであると理解しています。

しかし、ここでの実装にはまだいくつかの違いがあります

【聖杯レイアウト】

ここでは、左(200px)右(220px)の幅は固定されており、中央は適応的で、コンテナ部分の高さは一貫して実装されます。

デモ

ちょっとした説明:

HTML コードでは、最初に中間部分をコンテナーの先頭に配置する必要があります。次に左、右

1. 3 つすべてに float:left を追加し、さらにposition:relative (相対位置指定は後で使用するため)

2.中央部分の幅: 100% 占有

3.このとき、真ん中がいっぱいなので、左端を左に引く必要があります。 margin-left:-100% を使用します

4.この時、左は後ろに引いていますが、カバーされます。中央のコンテンツの左端を引き出すには、外側のコンテナにパディングを追加します: 0 220px 0 200px

5. 中央のコンテンツが引き戻されますが、左側もそれに続くので、それを復元するには、次を使用します。左の相対配置: -200px 同様に、右も相対的に配置して右に戻す必要があります: -220px

6. この時点ではおそらく適応的です。コンテナの高さを一定にしたい場合は、左、中央、右に min-height: 130px を追加します

ただし、IE に問題があることがわかりました。IE6/ の下部スペースの高さ。 7/8/9 は異なります..

もちろん、ウィンドウが小さくなりすぎて左右を表示できないようにするために、本文に min-width を追加できます

わかりました。コードは次のとおりです:

<!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"><head><meta charset="utf-8"><meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1"><title>圣杯布局</title><style type="text/css">    *{margin: 0;padding: 0;}    body{min-width: 700px;}    .header,    .footer{         border: 1px solid #333;        background: #aaa;        text-align: center;    }    .left,    .middle,    .right{         position: relative;        float: left;        min-height: 130px;    }    .container{        padding:0 220px 0 200px;        overflow: hidden;    }    .left{        margin-left: -100%;        left: -200px;        width: 200px;        background: red;    }    .right{        margin-left: -220px;        right: -220px;        width: 220px;        background: green;    }    .middle{         width: 100%;        background: blue;        word-break: break-all;    }    .footer{         clear: both;    }</style></head><body><div class="header">    <h4>header</h4></div><div class="container">    <div class="middle">        <h4>middle</h4>        <p>HHHHHHHHHHHHHHHHHHHHHH        hhhhhhhhhhhhhhhhhhhhhhhhhhhhhhh        HHHHHHHHHHHHHHHHHHHHHH        hhhhhhhhhhhhhhhhhhhhhhhhhhhhhhh        </p>    </div>    <div class="left">    <h4>left</h4>        <p>oooooooooooooo        0000000000000000        00000000000000000        ooooooooooooooo        ooooooooooooooo        000000000000000</p>    </div>    <div class="right">    <h4>right</h4>        <p>BBBBBBBBBBBBBB        888888888888888888        BBBBBBBBBBBBBBBBBB        88888888888888888888</p>    </div>    </div>    <div class="footer">        <h4>footer</h4>    </div></body></html>
ログイン後にコピー

【Double Flying Wing Layout】

DEMO

-全翼レイアウトはYuおじさんによって提案され、から始まりました。 Taobao UED

3 列のレイアウトを大きな鳥に例えると、メインは鳥と考えることができます。本体、サブ、エクストラは鳥の翼です。このレイアウトを実装するアイデアは、最初に最も重要な体の部分を配置し、次に翼を適切な場所に移動することです

実際には、上記の聖杯のレイアウトと似ています。も変更してください(違いは自分で考えてください) バー)

さて、ここに鳥がいますよ〜

左翼のサブは200ピクセル、右翼のエクストラは220ピクセルです。本体のメイン適応は不明です

1.HTMLコードでは、mainはsub extra

2.main sub extraはすべてfloat:left

3.Mainは全幅: 100%です

4.この時点ではメインがいっぱいなので、サブを最大まで引っ張る必要があります。左側では、margin-left:-100%を使用します。同様に、余分にmargin-left:-220pxを使用します。 、上記の聖杯レイアウトの手順を直接続行することも、変更を行うこともできます)

5.

メインコンテンツがカバーされています さて、周辺パディングの使用に加えて、マージンの使用も検討できます。

inner div を main--main-inner に追加し、margin: 0 220px 0 200px

6.

main が正しく表示されます

コードを誠実に作成します:

<!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"><head><meta charset="utf-8"><meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1"><title>双飞翼布局</title><style type="text/css">    *{margin: 0;padding: 0;}    body{min-width: 700px;}    .header,    .footer{         border: 1px solid #333;        background: #aaa;        text-align: center;    }    .sub,    .main,    .extra{         float: left;        min-height: 130px;    }    .sub{        margin-left: -100%;        width: 200px;        background: red;    }    .extra{        margin-left: -220px;        width: 220px;        background: blue;    }    .main{         width: 100%;    }    .main-inner{         margin-left: 200px;        margin-right: 220px;        min-height: 130px;        background: green;        word-break: break-all;    }    .footer{         clear: both;    }</style></head><body><div class="header">    <h4>header</h4></div>    <div class="main">    <div class="main-inner">        <h4>main</h4>        <p>HHHHHHHHHHHHHHHHHHHHHH        hhhhhhhhhhhhhhhhhhhhhhhhhhhhhhh        HHHHHHHHHHHHHHHHHHHHHH        hhhhhhhhhhhhhhhhhhhhhhhhhhhhhhh        </p>        </div>    </div>     <div class="sub">    <h4>sub</h4>        <p>oooooooooooooo        0000000000000000        00000000000000000        ooooooooooooooo        ooooooooooooooo        000000000000000</p>    </div>      <div class="extra">    <h4>extra</h4>        <p>BBBBBBBBBBBBBB        888888888888888888        BBBBBBBBBBBBBBBBBB        88888888888888888888</p>    </div>    <div class="footer">        <h4>footer</h4>    </div></body></html>
ログイン後にコピー

ソース:php.cn
このウェブサイトの声明
この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。
人気のチュートリアル
詳細>
最新のダウンロード
詳細>
ウェブエフェクト
公式サイト
サイト素材
フロントエンドテンプレート