CSS 複数列アダプティブ レイアウトについてはまだ要約する必要があり、それらはすべて基本的なスキルです。
通常、レイアウトにはposition 属性を使用するか、float 属性を使用します。また、display 属性を使用することもできます。
データによると、ホームページのコンテンツは完全に制御できることが多いため、位置はホームページのレイアウトに適しています。 Float はテンプレートのレイアウトに適しており、テンプレートに記入する内容を制御することはできません。
1. 固定左側サイズと適応右側
.left{ width: 150px; float: left; } /*流体布局*/.right { margin-left: 150px;}原則: 左側は固定幅でフローティング、右側は margin-left を使用し、固定幅は必要ありません。右側はコンテナ サイズの変化に適応できます
<!DOCTYPE html><meta charset="utf-8"/><html><head> <title></title> <style type="text/css">.left { width: 150px; float: left; background-color: pink;}/*流体布局*/.right { margin-left: 150px; background-color: green;} </style></head><body> <div class="left"> 左侧内容固定---------左左左左左左左左左左左左左左左左左左左左左左左左左左左左左左左左左左左左左左左左左左左左左左左左左左左左左左左左左左左左左左左左左左左左左左左左左左左左左左左左左左左左左左左左左左左左左左左左左左左 </div> <div class="right"> 右侧内容自适应----------右右右右右右右右右右右右右右右右右右右右右右右右右右右右右右右右右右右右右右右右右右右右右右右右右右右右右右右右右右右右右右右右右右右右右右右右右右右右右右右右右右右右右右右右右右右右右右右右右右 </div></body></html>。
2. 絶対配置の実装
.container{width: 100%;position: relative;padding-left: 150px;}.left {width: 150px;position: absolute;left: 0;}/*流体布局*/.right {width: 100%;}原則: 重要な点は、コンテナーが左側用のスペースを確保するために padding-left を設定し、左側がコンテナーに対して相対的に配置され、右側が残りのスペースを占めることです。
<!DOCTYPE html><meta charset="utf-8"/><html><head> <title>2 columns layout of starof</title><style type="text/css">.container { width: 100%; position: relative; padding-left: 150px;}.left { width: 150px; position: absolute; left: 0; background-color: pink;}/*流体布局*/.right { width: 100%; background-color: green;}</style></head><body> <div class="container"> <div class="left"> 左侧内容 <strong>固定</strong> ---------左左左左左左左左左左左左左左左左左左左左左左左左左左左左左左左左左左左左左左左左左左左左左左左左左左左左左左左左左左左左左左左左左左左左左左左左左左左左左左左左左左左左左左左左左左左左左左左左左左左 </div> <div class="right"> 右侧内容 <strong>自适应</strong> ----------右右右右右右右右右右右右右右右右右右右右右右右右右右右右右右右右右右右右右右右右右右右右右右右右右右右右右右右右右右右右右右右右右右右右右右右右右右右右右右右右右右右右右右右右右右右右右右右右右右 </div> </div></body></html>
3. BFC の実装
.left {width: 150px;float: left;}.right {display: table-cell;}原則: BFC の特性に従って、左の列は浮動小数点に隣接する要素で BFC を生成します。 BFC を作成した要素は、フロート要素で相互にオーバーレイできません。
<!DOCTYPE html><meta charset="utf-8"/><html><head> <title>2 columns layout of starof</title><style type="text/css">.left { width: 150px; float: left; background-color: pink;}/*流体布局*/.right { display: table-cell; background-color: green;}</style></head><body> <div class="left"> 左侧内容 <strong>固定</strong> ---------左左左左左左左左左左左左左左左左左左左左左左左左左左左左左左左左左左左左左左左左左左左左左左左左左左左左左左左左左左左左左左左左左左左左左左左左左左左左左左左左左左左左左左左左左左左左左左左左左左左 </div> <div class="right"> 右侧内容 <strong>自适应</strong> ----------右右右右右右右右右右右右右右右右右右右右右右右右右右右右右右右右右右右右右右右右右右右右右右右右右右右右右右右右右右右右右右右右右右右右右右右右右右右右右右右右右右右右右右右右右右右右右右右右右右 </div></body></html>効果は上記と同じです。
4. テーブルの実装
.container {width: 100%;display: table;}.left {width: 150px;display: table-cell;}.right {display: table-cell;}原則: これについてはもう話しません。
<!DOCTYPE html><meta charset="utf-8"/><html><head> <title>2 columns layout of starof</title><style type="text/css">.container { width: 100%; display: table;}.left { width: 150px; display: table-cell; background-color: pink;}.right { display: table-cell; background-color: green;}</style></head><body> <div class="container"> <div class="left"> 左侧内容 <strong>固定</strong> ---------左左左左左左左左左左左左左左左左左左左左左左左左左左左左左左左左左左左左左左左左左左左左左左左左左左左左左左左左左左左左左左左左左左左左左左左左左左左左左左左左左左左左左左左左左左左左左左左左左左左 </div> <div class="right"> 右侧内容 <strong>自适应</strong> ----------右右右右右右右右右右右右右右右右右右右右右右右右右右右右右右右右右右右右右右右右右右右右右右右右右右右右右右右右右右右右右右右右右右右右右右右右右右右右右右右右右右右右右右右右右右右右右右右右右右 </div> </div></body></html>
2. 右側は固定サイズ、左側はアダプティブ・フルイド・レイアウト
1. DOM の位置を変えない書き方【もっと活用】
.wrap { width: 100%; float: left; background-color: green;}.left { margin-right: 150px;}.right { width: 150px; float: left; margin-left: -150px; background-color: pink;}原則: 左側をラップの層で包み、ラップはレイアウトに使用され、左側はコンテンツを調整します。
ラップと右はどちらも左にフロートするため、マージン左に負の値を設定すると、右がビューポートを超えて引き戻されます。
この時、右はウィンドウに戻りますが、ラップ内容は上書きされます。コンテンツを元に戻すには、左に margin-right を設定すると便利です。この時点で、レイアウトとコンテンツは目的を達成し、完了です。
<!DOCTYPE html><meta charset="utf-8"/><html><head> <title></title><style type="text/css">.wrap { width: 100%; float: left; background-color: green;}.left { margin-right: 150px;}.right { width: 150px; float: left; margin-left: -150px; background-color: pink;}</style></head><body> <div class="wrap"> <div class="left"> 左侧内容 <strong>自适应</strong> ---------左左左左左左左左左左左左左左左左左左左左左左左左左左左左左左左左左左左左左左左左左左左左左左左左左左左左左左左左左左左左左左左左左左左左左左左左左左左左左左左左左左左左左左左左左左左左左左左左左左左 </div> </div> <div class="right"> 右侧内容 <strong>固定</strong> ----------右右右右右右右右右右右右右右右右右右右右右右右右右右右右右右右右右右右右右右右右右右右右右右右右右右右右右右右右右右右右右右右右右右右右右右右右右右右右右右右右右右右右右右右右右右右右右右右右右右 </div></body></html>
2. DOMの位置を変更する方法
.right{float: right;width: 150px;}.left{margin-right: 150px;}原則: 右側が最初にレンダリングされるため、右側は右にフロートされ、左側はマージン右だけが必要です。
<!DOCTYPE html><meta charset="utf-8"/><html><head> <title>2 columns layout of starof</title> <style type="text/css">.left { margin-right: 150px; background-color: green;}.right { width: 150px; float: right; background-color: pink;}</style></head><body> <div class="right"> 右侧内容 <strong>固定</strong> ----------右右右右右右右右右右右右右右右右右右右右右右右右右右右右右右右右右右右右右右右右右右右右右右右右右右右右右右右右右右右右右右右右右右右右右右右右右右右右右右右右右右右右右右右右右右右右右右右右右右 </div> <div class="left"> 左侧内容 <strong>自适应</strong> ---------左左左左左左左左左左左左左左左左左左左左左左左左左左左左左左左左左左左左左左左左左左左左左左左左左左左左左左左左左左左左左左左左左左左左左左左左左左左左左左左左左左左左左左左左左左左左左左左左左左左 </div></body></html>
3. 左右ともアダプティブです
記事でも紹介済み CSS Floating。
.left {float: left;}.right{display: table-cell;}原則: 左の列は左にフロートし、右の列は BFC を生成します。BFC の特性に従って、フローティング要素に隣接し、BFC が作成された要素は、フローティング要素と互いに重なり合うことはできません。
<!DOCTYPE html><meta charset="utf-8"/><html><head> <title>2 columns layout of starof</title> <style type="text/css">.left { float: left; background-color: green;}img{ width: 100px; height: 100px;}.right { display: table-cell; background-color: pink;}</style></head><body> <div class="left"> <img src="img/sheep.png"></div> <div class="right"> 右侧内容 <strong>自适应</strong> ----------右右右右右右右右右右右右右右右右右右右右右右右右右右右右右右右右右右右右右右右右右右右右右右右右右右右右右右右右右右右右右右右右右右右右右右右右右右右右右右右右右右右右右右右右右右右右右右右右右右 </div></body></html>
欠点: IE6 は display:table-cell をサポートしていないため、CSS ハックを使用して右側に overflow:auto;zoom:1 または overflow:hidden;zoom:1 を設定します。側。
.right{ display:table-cell;_display:block;zoom:1;}応用例: 赤枠部分では、2 つの列が適応的で、左右の幅が可変、右側の列の数が可変です。
4 列または 3 列のレイアウト、左右に固定幅、中央にアダプティブコンテンツ
1. Float+margin の実装.left {width: 150px;float: left;}.right {width: 100px;float: right;}.content {margin-right: 100px;margin-left: 150px;}.footer {clear: both;}原則: float を使用して実装します。
左側は固定幅で左側はフロート、右側は固定幅で右側はフロート、中央のマージンは左右の間隔を調整し、下部はフロートをクリアします。
注: 左と右の HTML コードはコンテンツの前に記述され、最初にレンダリングされます。
<!DOCTYPE><html> <meta charset="utf-8"/><head> <title>3 columns layout of starof</title> <style type="text/css">.header { background-color: gray;}.left { background-color: pink; width: 150px; float: left;}.right { background-color: pink; float: right; width: 100px;}.content { background-color: green; margin-right: 100px; margin-left: 150px;}.footer { background-color: grey; clear: both;}</style></head><body> <div id="page"> <div class="header"> <h1>标题</h1> </div> <div class="left"> <p> left <strong>固定</strong> -----------左左左左左左左左左左左左左左左左左左左左左左左左左左左左左左左左左左左左左左左左左左左左左左左左左左左左左左左左左左左左左左左左 </p> </div> <div class="right"> <p> right <strong>固定</strong> ----------右右右右右右右右右右右右右右右右右右右右右右右右右右右右右右右右右右右右右右右右右右右右右右右右右右右右右右右 </p> </div> <div class="content"> <p>内容区域</P> <p> content <strong>自适应</strong> --------------自适应自适应自适应自适应自适应自适应自适应自适应自适应自适应自适应自适应自适应自适应自适应自适应自适应自适应自适应自适应自适应自适应自适应自适应自适应自适应 </p> </div> <div class="footer"> <p>页脚</P> </div> </div></body></html>
欠点:
DOM の順序は視覚的な順序と異なり、重要なメインコンテンツがドキュメントの後ろにあり、優先順位が不当です。右側の列に多数のスクリプト リソースが含まれている場合、ページ全体の読み込みに影響を与えたり、読み込みがブロックされたりする可能性があります。ウェブサイト全体のページ骨格を構築するのには適していません。
2. float + ネガティブマージンの実装
原理は簡単ですが、処理は少し複雑ですので、順を追って説明します。
ステップ 1: まず、右のレイアウトを処理します。ラップと右フロートの両方を右に配置します。つまり、上記の最初の方法 [右に固定サイズ、左にアダプティブ流体レイアウト] を適用します。
<!DOCTYPE html><meta charset="utf-8"/><html><head> <title></title><style type="text/css">.wrap { width: 100%; float: left; background-color: green;}.leftwrap { margin-right: 150px;}.right { width: 150px; float: left; margin-left: -150px; background-color: pink;}</style></head><body> <div class="wrap"> <div class="leftwrap"> 留空 </div> </div> <div class="right"> 右侧内容 <strong>固定</strong> ----------右右右右右右右右右右右右右右右右右右右右右右右右右右右右右右右右右右右右右右右右右右右右右右右右右右右右右右右右右右右右右右右右右右右右右右右右右右右右右右右右右右右右右右右右右右右右右右右右右右 </div></body></html>現在の効果は次のようになります:
leftwrap の空の部分を次の構造で埋めます
<div class="contentwrap"> <div class="content">主体部分</div></div><div class="left">左侧栏</div>
ステップ 2: 左側とコンテンツ レイアウトを再度処理し、contentwrap が右側にフロートします。 left は左にフロートし、終了します。
<!DOCTYPE html><meta charset="utf-8"/><html><head> <title>3 columns layout of starof</title><style type="text/css">/*步骤一：先处理好right布局，wrap和right都右浮动*/.wrap { width: 100%; float: left; } /*wrap控制布局*/.leftwrap { margin-right: 150px; }/*leftwrap控制内容*/.right { width: 150px; float: left; margin-left: -150px; background-color: pink; }/*步骤二：再处理left和content布局，contentwrap右浮动，left左浮动*/.contentwrap { float: right; width: 100%; }/*contentwrap控制主体内容布局*/.left { float: left; width: 200px; margin-right: -200px; background-color: pink; }.content { margin-left: 200px; background-color: green; }/*content控制主体内容*/</style></head><body> <div class="wrap"> <div class="leftwrap"> <div class="contentwrap"> <div class="content">content<strong>自适应</strong></div> </div> <div class="left"> 左侧内容 <strong>固定</strong> ---------左左左左左左左左左左左左左左左左左左左左左左左左左左左左左左左左左左左左左左左左左左左左左左左左左左左左左左左左左左左左左左左左左左左左左左左左左左左左左左左左左左左左左左左左左左左左左左左左左左左</div> </div> </div> <div class="right"> 右侧内容 <strong>固定</strong> ----------右右右右右右右右右右右右右右右右右右右右右右右右右右右右右右右右右右右右右右右右右右右右右右右右右右右右右右右右右右右右右右右右右右右右右右右右右右右右右右右右右右右右右右右右右右右右右右右右右右 </div></body></html>
欠点: ネストされた多層タグ、HTML ドキュメントは十分に簡潔ではありません。
まとめ: 必要がない場合は、フローティング レイアウトの幅と高さを安易に設定せず、可能な限り調整するようにしてください。
この記事の著者である Starof は、知識自体が変化しているため、著者も常に学習し成長しており、読者の誤解を避け、追跡を容易にするために、記事の内容も随時更新されます。出典、転載の際は出典を明記してください: ご不明な点がございましたら、お気軽にご相談ください。一緒に進歩していきます。
![[Web フロントエンド] Node.js クイック スタート](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
