適応レイアウトの処理について（フロートとマージンネガティブマージンを使用）

適応型レイアウトは、実際のアプリケーションでますます一般的になっています。今日は、主にフローティングホーリーグレイルレイアウト（ダブルウィングレイアウトとも呼ばれ、主にフローティングとネガティブマージンによって実装されます）の適応型レイアウトのデモをいくつか共有します。絶対位置レイアウトは紹介しませんでしたが、次の例から理解できると思います。絶対位置レイアウトも非常に簡単です。

PS: Holy Grail レイアウトの利点は、フロントエンド開発におけるプログレッシブエンハンスメントの概念に準拠していることです。ブラウザは DOM を上から下に解析するため、Holy Grail レイアウトでは、ページの重要なコンテンツセクションを DOM の前に置いて最初に解析し、二次的な補足コンテンツを DOM の後ろに置いて後で解析することができます。
次の例は、実際のアプリケーションにおける適応レイアウトの問題のほとんどを解決できます。興味のある学生はこれを学習できます。コードは次のとおりです。

1. 左側を固定、右側を適応型（Holy Grail レイアウトの実装）：

コードをコピー

コードは次のとおりです。

<!DOCTYPE HTML>
<html>
<ヘッド>
<meta http-equiv="コンテンツタイプ" コンテンツ="text/html; charset=utf-8">
<title>無題のドキュメント</title>
<スタイルタイプ="text/css">
本文{マージン:0;パディング:0}
.wrap{ 幅:100%; フロート:左}
.content{ 高さ:300px; 背景:緑; 左余白:200px}
.right{ 幅:200px; 高さ:300px; 背景:赤; フロート:左; 左マージン:-100%}
</スタイル>
</head>
<本文>
<div class="wrap">
<div class="content">コンテンツ</div>
</div>
<div class="right">脇に</div>
</本文>
</html>

2. 右側を固定、左側を適応型（聖杯レイアウトの実装）：

コードをコピー

コードは次のとおりです。

<!DOCTYPE HTML>
<html>
<ヘッド>
<meta http-equiv="コンテンツタイプ" コンテンツ="text/html; charset=utf-8">
<title>無題のドキュメント</title>
<スタイルタイプ="text/css">
本文{マージン:0;パディング:0}
.wrap{ 幅:100%; フロート:左}
.content{ 高さ:300px; 背景:緑; 右余白:200px}
.right{ 幅:200px; 高さ:300px; 背景:赤; フロート:左; 左余白:-200px;}
</スタイル>
</head>
<本文>
<div class="wrap">
<div class="content">コンテンツ</div>
</div>
<div class="right">脇に</div>
</本文>
</html>

3. 左側と右側を固定し、中央を適応させる:

コードをコピー

コードは次のとおりです。

<!DOCTYPE HTML>
<html>
<ヘッド>
<meta http-equiv="コンテンツタイプ" コンテンツ="text/html; charset=utf-8">
<title>無題のドキュメント</title>
<スタイルタイプ="text/css">
本文{マージン:0;パディング:0}
.wrap{ 幅:100%; フロート:左}
.content{ 高さ:300px; 背景:緑; 左余白:200px; 右余白:200px}
.left{ 幅:200px; 高さ:300px; フロート:left; 背景:黄色; 左余白:-100%}
.right{ 幅:200px; 高さ:300px; 背景:赤; フロート:左; 左余白:-200px}
</スタイル>
</head>
<本文>
<div class="wrap">
<div class="content">コンテンツ</div>
</div>
<div class="left">脇に</div>
<div class="right">脇に</div>
</本文>
</html>

<<: JavaScript を学ぶときに知っておくべき 3 つのヒント

>>: Linux環境でよく使われるMySQLコマンドの紹介