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