記事のディレクトリ
1.トピック
質問に基づいて答えてください。
（左の列の幅は固定され、右の列は適応型です）
タイトル：既知の高さは100ピクセル、左の幅は150ピクセル、右の幅は適応型です。
第二に、私のコードの詳細
https://codepen.io/janmie-cjm/pen/ExKpVdO
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=">
<title>页面布局-两栏布局1</title>
<style>
html *{
margin: 0;
padding: 0;
}
section {
margin-bottom: 10px;
}
</style>
</head>
<body>
<!-- 已知高度100px，左宽度固定150px，右宽度自适应 -->
<!-- 1-float -->
<section>
<style>
#wrapper1 {
height: 100px;
width: 100%;
background: #fffe9f;
}
.left1 {
width: 150px;
height: 100%;
background: #cff;
float: left;
}
.right1 {
background: #fcc;
height: 100%;
overflow: auto;
}
</style>
<article id="wrapper1">
<div class="left1">左侧</div>
<div class="right1">
<h3>1-float</h3>
<p>右侧</p>
<p>右侧</p>
<p>右侧</p>
<p>右侧</p>
<p>右侧</p>
</div>
</article>
</section>
<!-- 2-绝对定位 -->
<section>
<style>
#wrapper2 {
height: 100px;
width: 100%;
background: #fffe9f;
position: relative;
}
.left2 {
width: 150px;
height: 100%;
background: #cff;
position: absolute;
left: 0;
}
.right2 {
background: #fcc;
height: 100%;
width: 100%;
position: absolute;
left: 150px;
}
</style>
<article id="wrapper2">
<div class="left2">左侧</div>
<div class="right2">
<h3>2-绝对定位</h3>
<p>右侧</p>
<p>右侧</p>
<p>右侧</p>
<p>右侧</p>
<p>右侧</p>
</div>
</article>
</section>
<!-- 3-flex -->
<section>
<style>
#wrapper3 {
height: 100px;
width: 100%;
background: #fffe9f;
display: flex;
}
.left3 {
width: 150px;
height: 100%;
background: #cff;
}
.right3 {
background: #fcc;
height: 100%;
flex: 1;
}
</style>
<article id="wrapper3">
<div class="left3">左侧</div>
<div class="right3">
<h3>3-flex</h3>
<p>右侧</p>
<p>右侧</p>
<p>右侧</p>
<p>右侧</p>
<p>右侧</p>
</div>
</article>
</section>
<!-- 4-table -->
<section>
<style>
#wrapper4 {
height: 100px;
width: 100%;
background: #fffe9f;
display: table;
}
#wrapper4 div {
display: table-cell;
}
.left4 {
width: 150px;
height: 100%;
background: #cff;
}
.right4 {
background: #fcc;
height: 100%;
}
</style>
<article id="wrapper4">
<div class="left4">左侧</div>
<div class="right4">
<h3>4-table</h3>
<p>右侧</p>
<p>右侧</p>
<p>右侧</p>
<p>右侧</p>
<p>右侧</p>
</div>
</article>
</section>
<!-- 5-grid -->
<section>
<style>
#wrapper5 {
width: 100%;
background: #fffe9f;
display: grid;
grid-template-rows: 100px;
grid-template-columns: 150px auto;
}
.left5 {
height: 100%;
background: #cff;
}
.right5 {
background: #fcc;
height: 100%;
}
</style>
<article id="wrapper5">
<div class="left5">左侧</div>
<div class="right5">
<h3>5-grid</h3>
<p>右侧</p>
<p>右侧</p>
<p>右侧</p>
<p>右侧</p>
<p>右侧</p>
</div>
</article>
</section>
</body>
</html>
3、まとめ
-
この問題の解決策は何ですか？
フローティング/絶対測位/フレックスボックス/テーブルレイアウト/グリッドレイアウト; -
各プログラムの長所と短所は？
1）浮動
◎：単純
欠如：離れるドキュメントフローとBFCのアプリケーションと組み合わせることの必要性からブレイク
2）絶対位置決め
◎：シンプル
欠如：
ブレークアウェイドキュメントフローとBFCのアプリケーションと組み合わせることの必要性から、より多くのコードで3 ）優れたフレックスボックス
：シンプルで高速、優れた互換性
4）テーブルレイアウト
優れた：優れた互換性
不足：各列の高さが同時に変化する;テーブルを最初にレンダリングする必要があり、ページ生成速度が遅れる
5 ）グリッドレイアウトは
優れています：複数の行と複数の列を持つ複雑な操作を実現でき、互換性が向上します。コードを簡素化する -
互換性のあるソリューションはありますか？
フレックスボックス、グリッドレイアウト
※コードにはまだまだ欠点がたくさんありますので、いろいろな意見を出し合い、コミュニケーションを図っていきたいと思います。*