ホームページ >ウェブフロントエンド >CSSチュートリアル >CSS 3カラムレイアウトの3つの実装方法(聖杯レイアウト、両翼レイアウト、フレックスレイアウト)
この記事の内容は、LNMP による環境構築のプロセスをソースコード形式で記録するものです。必要な方は参考にしていただければ幸いです。
レンダリング:
nbsp;html> <title>圣杯</title> <style> .container{ padding:0 200px 0 180px; height:100px; } .left{ float:left; width:180px; height:100px; margin-left:-100%; background:red; position:relative; left:-180px; } .main{ float:left; width:100%; height:100px; background:blue; } .right{ float:left; width:200px; height:100px; margin-left:-200px; background:green; position:relative; right:-200px; } </style> <div> <div>middle</div> <div>left</div> <div>right</div> <h3>Doubleflying wingレイアウト</h3> <pre class="brush:php;toolbar:false">nbsp;html> <meta> <title>双飞翼</title> <style> .main{ float:left; width:100%;/*左栏上去到第一行*/ height:100px; background:blue; } .left{ float:left; width:180px; height:100px; margin-left:-100%; background:red; } .right{ float:left; width:200px; height:100px; margin-left:-200px; background:green; } </style> <div></div> <div>left</div> <div>right</div>
nbsp;html> <meta> <title>Flex</title> <style> .flex { display: flex; flex-flow: row; } .left{ width: 180px; height: 100px; background-color: red; } .main{ flex: 1; height: 100px; background-color: blue; } .right { width: 200px; height: 100px; background-color: green; } </style> <div> <div>left</div> <div>middle</div> <div>right</div> </div>
メインが左側のモジュールと右側のモジュールの両方に一定の幅を与えたい場合右側では、padding: 0 100px 0 200px; または margin: 0 100px 0 200px; の 2 つの方法のみです。
これら 2 つのルート:
マージン ルートを選択した場合は、最後まで進み続けて、最後に作成したコードが二重飛行翼であることがわかります。
パディング ルートを選択した場合、それが聖杯です。
おすすめ関連記事:
以上がCSS 3カラムレイアウトの3つの実装方法(聖杯レイアウト、両翼レイアウト、フレックスレイアウト)の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。