ホームページ > 記事 > ウェブフロントエンド > CSS の 2 列および 3 列のアダプティブ レイアウト メソッド Organized_html/css_WEB-ITnose
CSS の 2 列および 3 列のアダプティブ レイアウト メソッド Organized_html/css_WEB-ITnose
- WBOYオリジナル
- 2016-06-24 11:30:511611ブラウズ
従来の方法をベースに、Flex レイアウトを追加し、それぞれの方法の長所と短所を説明します。まずディレクトリに移動します:
- 2 列レイアウト: 左側が固定幅、右側が適応型
- 方法 1: 浮動小数点数と負のマージンを使用する
- 方法 2: マージンを使用する
- 方法 3: 位置を使用する
- 方法 4: フレックス レイアウトを使用する
- 3 列レイアウト: 左と右のスタイル、中央で適応。
- 方法 1: 負のマージンを使用する
- 方法 2: 絶対配置を使用する
- 方法 3: フレックス レイアウトを使用する
2 列レイアウト: 左側が固定幅、右側が適応幅
方法 1: 使用するfloat と負のマージン
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>Document</title> <style> *{ margin: 0; padding: 0; } .main,.sitebar{ font: bolder 20px/300px; } .main{ width: 100%; float: left; } .main .content{ margin-left: 200px; background-color: red; } .sitebar{ width: 200px; float: left; background-color: green; margin-left: -100%; } </style></head><body> <div class="main"> <div class="content">右侧主体自适应区块</div> </div> <div class="sitebar">左侧定宽200px区块</div></body></html> -
利点: ページの最適化を考慮して、右側のメイン コンテンツ領域が最初にロードされ、左側が後でロードされます。
-
短所: div ラッピングの追加レイヤーが追加されます。
方法 2: マージンを使用する
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>Document</title> <style> *{ margin: 0; padding: 0; } .sitebar{ float: left; width: 200px; background-color: green; } .content{ background-color: red; margin-left: 200px; } </style></head><body> <div class="sitebar">左侧定宽200px区块</div> <div class="content">右侧主体自适应区块</div></body></html> -
利点: コードが簡潔で理解しやすい
-
欠点: ページの最適化には役に立たず、右側のメイン コンテンツ領域は
の後に読み込まれます
方法 3: 位置を使用する
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>Document</title> <style> *{ margin: 0; padding: 0; } .sitebar{ width: 200px; background-color: green; } .content{ position: absolute; left: 200px; right: 0; top: 0; background-color: red; } </style></head><body> <div class="content">右侧主体自适应区块</div> <div class="sitebar">左侧定宽200px区块</div></body></html> -
長所: ページの最適化を考慮して、右側のコンテンツ領域が最初に読み込まれます
-
短所: まだ考えていません。 。
上記3つの方法はIE7以降に対応していますが、IE7以下で高さを設定していないと高さがずれるバグが発生します。これは、親要素 font-size=0 を設定し、次に子要素 font-size をそれぞれ設定することで解決できます。
方法 4: フレックス レイアウトを使用する
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>Document</title> <style> *{ margin: 0; padding: 0; } .main{ display: flex; } .content{ flex:1; background-color: red; } .sitebar{ flex:0 0 200px; order:-1; background-color: green; } </style></head><body><div class="main"> <div class="content">右侧主体自适应区块</div> <div class="sitebar">左侧定宽200px区块</div></div> </body></html> -
利点: CSS3 の新しいレイアウト方法、優れています
-
欠点: IE11+ のみをサポートします。
3 列レイアウト: 左と右、中央で適応。
方法 1: 負のマージンを使用する
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>Document</title> <style> *{ margin: 0; padding: 0; } .main,.left,.right{ height: 300px; font: 20px/300px; color: #fff; text-align: center; } .main{ width: 100%; float: left; } .main .content{ margin: 0 300px 0 200px; background-color: black; } .left{ width: 200px; float: left; margin-left: -100%; background-color: red; } .right{ width: 300px; float: left; margin-left: -300px; background-color: blue; } </style></head><body> <div class="main"> <div class="content">中间主体区域宽度自适应</div> </div> <div class="left">左侧定宽200px</div> <div class="right">右侧定宽300px</div></body></html> -
利点: IE7 以降と互換性があり、ページの最適化を考慮して、中央のコンテンツ領域が最初に読み込まれます
-
欠点: div ネストの層が 1 つ多くなり、理解するのが困難です
方法 2: 絶対配置を使用する
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>Document</title><style>body{ margin:0px;}#left { background-color: #E8F5FE; border: 1px solid #A9C9E2; height: 400px; width: 100px; position: absolute; top: 0px; left: 0px;}#center { background-color: #F2FDDB; border: 1px solid #A5CF3D; height: 400px; margin-right: 102px; margin-left: 102px;}#right { background-color: #FFE7F4; border: 1px solid #F9B3D5; height: 400px; width: 100px; position: absolute; top: 0px; right: 0px;}</style></head><body> <div id="center">中列</div> <div id="left">左列</div> <div id="right">右列</div></body></html> -
長所: ページの最適化を考慮してコード構造が単純で、中間コンテンツが最初に読み込まれます
-
短所: まだ考えていません。 。
方法 3: フレックス レイアウトを使用する
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>Document</title><style>.HolyGrail-body { display: flex; flex: 1;}.HolyGrail-content { flex: 1; background-color: green;}.HolyGrail-nav, .HolyGrail-ads { /* 两个边栏的宽度设为12em */ flex: 0 0 200px; background-color: blue;}.HolyGrail-nav { /* 导航放到最左边 */ order: -1; background-color: grey;}</style></head><body> <div class="HolyGrail-body"> <main class="HolyGrail-content">...</main> <nav class="HolyGrail-nav">...</nav> <aside class="HolyGrail-ads">...</aside> </div></body></html> -
利点: ハイエンド
-
欠点: IE11+ のみをサポート
声明：
この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。