ホームページ  >  記事  >  ウェブフロントエンド  >  聖杯レイアウトの詳細解説とCSSレイアウトの両翼レイアウト例

聖杯レイアウトの詳細解説とCSSレイアウトの両翼レイアウト例

高洛峰
高洛峰オリジナル
2017-03-10 10:44:041715ブラウズ

聖杯レイアウトとダブルフライングウイングレイアウトの実装は、左右の列の幅を固定し、中央部分を適応させることを目的としています。次にCSSレイアウトのHoly GrailレイアウトとDouble Flying Wingレイアウトを紹介しますので、興味のある方は一緒に学んでみてください

私の理解によれば、実際にHoly GrailレイアウトとDouble Flying Wingレイアウトを実現する目的は次のとおりです。左と右の列の幅を固定することです。中央部分はアダプティブです。
聖杯レイアウト

聖杯レイアウトの詳細解説とCSSレイアウトの両翼レイアウト例

実装原則
HTMLコードでは、まず中央の部分をコンテナの前面に配置し、次に左、右に配置する必要があります
1 3つすべてをフローティングに設定します。 :left、position:relative (相対的な位置決めが後で使用されるため)
2. 中央は幅を 100% に設定して線を塗りつぶします
3. この時点では、中央は全行を占めるため、左をドラッグする必要があります。中央が位置する行の左端にマージンを使用します:-100%
4. このとき、左は中央が位置する行の左端に引き戻されますが、左端をカバーします。真ん中のコンテンツを取り出すには、外側のコンテナにpadding: 0 210pxを追加します
5.middle コンテンツは取り出されますが、左側も取り出されるので、それを復元するには、相対位置指定 left:- を使用します。左は 210px
6. 同様に、右も中央が配置されている行の右端に引っ張る必要があります。 margin-left:-210px 、 right:-210px を使用します。
実装コード

<!DOCTYPE HTML>    
<html lang="en-US">    
<head>    
<meta charset="UTF-8">    
<title>圣杯布局</title>    
<style type="text/css">    
body {    
text-align: center;;    
} 
#demo { 
margin: auto;    
} 
#header, #footer { 
height: 50px;    
background-color: #aaa;    
} 
#container { 
overflow: hidden;    
margin: 10px 0;    
padding:0 210px;    
} 
#left { 
background-color: red;    
float:left;    
position:relative;    
left:-210px;    
width:200px;    
margin-left:-100%;    
} 
#right { 
background-color: green;    
width: 200px;    
margin-left: -200px;    
float: left;    
right: -210px;    
position: relative;    
} 
#middle { 
background-color: blue;    
float:left;    
width:100%;    
}    
</style>    
</head>    
<body>    
<p id="demo">    
<header id="header">头部</header>    
<p id="container">    
<p id="middle">    
middle<br>主内容区域    
</p>    
<p id="left">    
left<br>左侧边栏区域    
</p>    
<p id="right">    
right<br>右侧边栏区域    
</p>    
</p>    
<footer id="footer">底部</footer>    
</p>    
</body>    
</html>

ダブルフライングウィングレイアウト

聖杯レイアウトの詳細解説とCSSレイアウトの両翼レイアウト例

実装原則
HTMLコードでは、まず中央の部分をコンテナの前面に配置し、次に左、右に配置します
1にfloat:leftを設定します。 3 つすべて
2. 中央が 1 行を占めるように幅を 100% に設定します
3. この時点では、中央が 1 行を占めるため、中央が位置する行の左端までドラッグし、マージンを使用する必要があります。 left:-100%、同じ理由で right は margin-left:-200px を使用します
4. このとき、真ん中のコンテンツを引き出すために、 のパディングを使用します。周辺コンテナでは、margin の使用を検討することもできます。 Middle は、内部レイヤー p -- middle_content を追加し、margin: 0 210px を設定します。 CSS レイアウトのダブル ウイング レイアウトが皆様のお役に立つことを願っています。

以上が聖杯レイアウトの詳細解説とCSSレイアウトの両翼レイアウト例の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。

声明:
この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。