ラインレイアウト
マルチカラムのレイアウト
聖杯のレイアウト
全翼飛行機
まず、ラインレイアウト
垂直水平中心線レイアウト
50：0自動;：;それは水平方向の中央ましょうが、絶対位置レイアウトの使用は、その後、トップ設定：なし使用余裕はありません注：50％左 ;％を、それが垂直水平方向の中央されていないので、しかし、これは、十分な光の設定ではありません、ので、それは、自分自身の幅と高さを考慮していないので、ここで提供さマージン左マージントップ、そして再び土台ボックス自体のこの態様による。場合にのみ、トップ：50％;左50 ％、 次のようにマージン、左マージントップなしで提供は、効果があります。
コードは以下の通りであります：
<！DOCTYPE HTML>
<HTML LANG = "EN">
<HEAD>
<メタ文字コード= "UTF-8">
<メタ名= "ビューポート"コンテンツ= "幅=装置幅、初期の規模= 1.0">
<メタHTTP-当量= "X-UA-互換性のある"コンテンツ= "IE =エッジ">
<タイトル>ドキュメント</ TITLE>
<スタイルタイプ= "テキスト/ cssの">
* {
マージン：0;
パディング：0;
背景：burlywood。
}
.container {
背景：RGB（136、89、182）。
高さ：200pxの。
幅：800ピクセル;
テキスト整列：センター;
マージン：0自動;
位置：絶対;
トップ：50％;
左：50％;
<DIV CLASS = "コンテナ">これはページの内容です。</ DIV>
</ BODY>
</ HTML>
最終結果は、次のことを示しています。
第二に、マルチカラムのレイアウト
第三に、聖杯のレイアウト（特定のアイデアのPDF文書を参照してください）
コード：
<!DOCTYPE html>
<html>
<head>
<title>圣杯布局</title>
<meta charset="utf-8">
<style type="text/css">
* {
margin: 0;
padding: 0;
}
body {
min-width: 700px;
}
.header,
.footer {
float: left;
width: 100%;
background: #ddd;
height: 40px;
line-height: 40px;
text-align: center;
}
.container {
padding: 0 220px 0 200px;
}
.left,
.middle,
.right {
position: relative;
float: left;
min-height: 300px;
}
.left {
margin-left: -100%;
left: -200px;
width: 200px;
background: #f00;
}
.right {
width: 220px;
margin-left: -220px;
right: -220px;
background: #30a457;
}
.middle {
width: 100%;
background: #1a5acd;
}
</style>
</head>
<body>
<div class="header">
<h4>header</h4>
</div>
<div class="container">
<div class="middle">
<h4>middle</h4>
<p>
这是页面的主体内容 这是页面的主体内容 这是页面的主体内容 这是页面的主体内容 这是页面的主体内容 这是页面的主体内容 这是页面的主体内容 这是页面的主体内容
</p>
</div>
<div class="left">
<h4>left</h4>
<p>
这是页面的左边 这是页面的左边 这是页面的左边 这是页面的左边 这是页面的左边 这是页面的左边
</p>
</div>
<div class="right">
<h4>right</h4>
<p>
这是页面的右边 这是页面的右边 这是页面的右边 这是页面的右边
</p>
</div>
</div>
<div class="footer">
<h4>footer</h4>
</div>
</body>
</html>
四、双飞翼布局（圣杯布局改良版，pdf）（相比较圣杯布局，去掉左边，右边和中间的最外层包裹，所以不用相对定位做）
代码：
<!DOCTYPE html>
<html>
<head>
<title>圣杯布局</title>
<meta charset="utf-8">
<style type="text/css">
* {
margin: 0;
padding: 0;
}
body {
min-width: 700px;
}
.header,
.footer {
border: 1px solid #333;
background: #ddd;
height: 40px;
line-height: 40px;
text-align: center;
}
.sub,
.middle,
.extra {
float: left;
min-height: 300px;
}
.extra {
margin-left: -220px;
width: 220px;
background: #30a457;
}
.sub {
margin-left: -100%;
width: 200px;
background: #f00;
}
.main-inner {
margin-left: 200px;
margin-right: 220px;
min-height: 300px;
background: #1a5acd;
}
.footer {
clear: both;
}
</style>
</head>
<body>
<div class="header">
<h4>header</h4>
</div>
<div class="middle">
<div class="main-inner">
<h4>middle</h4>
<p>
这是页面的主体内容 这是页面的主体内容 这是页面的主体内容 这是页面的主体内容 这是页面的主体内容 这是页面的主体内容 这是页面的主体内容 这是页面的主体内容
</p>
</div>
</div>
<div class="sub">
<h4>left</h4>
<p>
这是页面的左边 这是页面的左边 这是页面的左边 这是页面的左边 这是页面的左边 这是页面的左边
</p>
</div>
<div class="extra">
<h4>right</h4>
<p>
这是页面的右边 这是页面的右边 这是页面的右边 这是页面的右边
</p>
</div>
<div class="footer">
<h4>footer</h4>
</div>
</body>
</html>
