ホームページ >ウェブフロントエンド >htmlチュートリアル >一般的な 2 列および 3 列のレイアウト、幅と高さadaptive_html/css_WEB-ITnose
一般的な 2 列および 3 列のレイアウト、幅と高さadaptive_html/css_WEB-ITnose
- WBOYオリジナル
- 2016-06-21 08:57:111167ブラウズ
今日は申年の最初の仕事の日であり、新たなスタートでもあります。 CSS を使用して、仕事でよく見る 2 列レイアウトを実装する方法を共有しましょう。 1. 左側が固定幅、右側が適応型の高さ 2. 左側が固定幅と高さ、右側が適応型の幅と高さ。 ; 3. 左、右 側面の幅は固定され、中央は適応されます。
1. 左側が固定幅、右側が適応型高さ
- レンダリング
pic1.png
pic2.png
- html+css
<!DOCTYPE html><html lang="en"><head><meta charset="UTF-8"><title>左侧固定宽，自适应右侧高度</title><style> .main{ position: relative; color: #fff; } .left{ position: absolute; top: 0; left: 0; bottom: 0; width: 300px; background: #f00; } .right{ height: 200px; margin-left: 300px; background: #000; }</style></head><body><div class="main"> <div class="left">left</div> <div class="right">right</div></div></body></html>コードを見てください。実際、左側には固定の高さがなく、左側には固定の幅がありません。右側。
2. 左側の幅と高さは固定され、右側の幅と高さは適応されます
- レンダリング
pic3.png
- html+css
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>左侧宽度高度固定，右侧自适应宽高</title> <style> .main{ overflow: hidden; color: #fff; } .left{ float: left; width: 300px; height: 200px; background: #f00; } .right{ margin-left: -300px; padding-bottom: 9999px; margin-bottom: -9999px; background: #000; } </style></head><body> <div class="main"> <div class="left">left</div> <div class="right">right</div> </div></body></html>コードを見ると、確かに左側の幅と高さは決定されていますが、右側の幅と高さは決まりません。右側は決まっていません。
3. 左側と右側は固定幅、中央はアダプティブです
- レンダリング
pic4.png
pic5.png
- html+css
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>左侧、右侧固定宽，中间自适应</title> <style> .fl{ float: left; } .main{ color: #fff; } .center{ background: #9A0069; width: 100%; height: 300px; } .center .content{ padding: 0 100px; } .left{ width: 100px; height: 300px; margin-left: -100%; background: #009A61; } .right{ width: 200px; height: 300px; background: #00529A; margin-left: -200px; } </style></head><body> <div class="main"> <div class="center fl"> <div class="content"> center </div> </div> <div class="left fl">left</div> <div class="right fl">right</div> </div></body></html>コードを見ると、左側と右側は固定幅で、中央は幅は適応です。重要な点は、float:left が margin-left とともに使用されることです。同時に、中央の div が左右の前に書かれ、よりセマンティックになります。
ただし、ここでの高さはハードコーディングされています。 「左右の幅は固定、中央は適応」を維持しつつ、片側の高さをベンチマークとして使用する方法。 、他の 2 つの高さは毛織物に適応しますか？ 1と2のコードを参照して実装できますが、ここでは書きません。
声明：
この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。