今日は申年の最初の仕事の日であり、新たなスタートでもあります。 CSS を使用して、仕事でよく見る 2 列レイアウトを実装する方法を共有しましょう。 1. 左側が固定幅、右側が適応型の高さ 2. 左側が固定幅と高さ、右側が適応型の幅と高さ。 ; 3. 左、右 側面の幅は固定され、中央は適応されます。
1. 左側が固定幅、右側が適応型高さ
pic1.png
pic2.png
<!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
<!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
<!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>ただし、ここでの高さはハードコーディングされています。 「左右の幅は固定、中央は適応」を維持しつつ、片側の高さをベンチマークとして使用する方法。 、他の 2 つの高さは毛織物に適応しますか？ 1と2のコードを参照して実装できますが、ここでは書きません。
![[Web フロントエンド] Node.js クイック スタート](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
