ホームページ > 記事 > ウェブフロントエンド > CSS レイアウト 聖杯レイアウト & 両翼レイアウト_html/css_WEB-ITnose
CSS レイアウト 聖杯レイアウト & 両翼レイアウト_html/css_WEB-ITnose
- WBOYオリジナル
- 2016-06-24 11:45:541591ブラウズ
実際のところ、聖杯レイアウトと両翼レイアウトを実現する目的は、左右の列の幅を固定し、中央部分を調整することであると理解しています。
しかし、ここでの実装にはまだいくつかの違いがあります
【聖杯レイアウト】
ここでは、左(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 UED3 列のレイアウトを大きな鳥に例えると、メインは鳥と考えることができます。本体、サブ、エクストラは鳥の翼です。このレイアウトを実装するアイデアは、最初に最も重要な体の部分を配置し、次に翼を適切な場所に移動することです
実際には、上記の聖杯のレイアウトと似ています。も変更してください（違いは自分で考えてください） バー）
さて、ここに鳥がいますよ〜
左翼のサブは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>