記事のディレクトリ
1.トピック
質問に基づいて答えてください。
（上下の列の高さは固定されており、中央は適応型です）
トピック：幅がわかっていると仮定して、上下の列の高さが150px、中央がである3列のレイアウトを記述してください。適応。
第二に、私のコードの詳細
https://codepen.io/janmie-cjm/pen/vYGReEv
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=">
<title>页面布局-三栏布局2</title>
<style>
html *{
margin: 0;
padding: 0;
}
html,body {
height: 100%;
background-color: #ffffee;
}
article {
margin-bottom: 10px;
}
</style>
</head>
<body>
<!-- 假设宽度已知，请写出三栏布局，其中上栏、下栏高度各位150px，中间自适应。 -->
<!-- 1-绝对定位 -->
<section>
<style>
.wrapper1 {
width: 100px;
}
.top1,.bottom1 {
background-color: #cff;
height: 50px;
display: absolute;
}
.top1 {
top: 0;
}
.bottom {
bottom: 0;
}
.center1 {
background-color: #fcc;
}
</style>
<article>
<div class="wrapper1">
<div class="top1">我是top</div>
<div class="center1">
<h6>1-绝对定位</h6>
<p>我是center</p>
<p>我是center</p>
<p>我是center</p>
<p>我是center</p>
<p>我是center</p>
<p>我是center</p>
<p>我是center</p>
<p>我是center</p>
<p>我是center</p>
<p>我是center</p>
</div>
<div class="bottom1">我是bottom</div>
</div>
</article>
</section>
<!-- 2-flexbox -->
<section>
<style>
.wrapper2 {
width: 100px;
display: flex;
flex-direction: column;
}
.center2 {
background-color: #fcc;
flex: 1;
}
.top2,.bottom2 {
height: 50px;
background-color: #cff;
}
</style>
<article>
<div class="wrapper2">
<div class="top2">我是top</div>
<div class="center2">
<h6>2-flexbox</h6>
<p>我是center</p>
<p>我是center</p>
<p>我是center</p>
<p>我是center</p>
<p>我是center</p>
<p>我是center</p>
<p>我是center</p>
<p>我是center</p>
<p>我是center</p>
<p>我是center</p>
</div>
<div class="bottom2">我是bottom</div>
</div>
</article>
</section>
<!-- 3-table -->
<section>
<style>
.wrapper3 {
display: table;
}
.wrapper3 div {
display: table-columns;
width: 100px;
}
.top3,.bottom3 {
background-color: #cff;
height: 50px;
}
.center3 {
background-color: #fcc;
}
</style>
<article>
<div class="wrapper3">
<div class="top3">我是top</div>
<div class="center3">
<h6>3-table</h6>
<p>我是center</p>
<p>我是center</p>
<p>我是center</p>
<p>我是center</p>
<p>我是center</p>
<p>我是center</p>
<p>我是center</p>
<p>我是center</p>
<p>我是center</p>
<p>我是center</p>
</div>
<div class="bottom3">我是bottom</div>
</div>
</article>
</section>
<!-- 4-grid -->
<section>
<style>
.wrapper4 {
display: grid;
grid-template-rows: 50px auto 50px;
grid-template-columns: 100px;
}
.top4,.bottom4 {
background-color: #cff;
}
.center4 {
background-color: #fcc;
}
</style>
<article>
<div class="wrapper4">
<div class="top4">我是top</div>
<div class="center4">
<h6>4-grid</h6>
<p>我是center</p>
<p>我是center</p>
<p>我是center</p>
<p>我是center</p>
<p>我是center</p>
<p>我是center</p>
<p>我是center</p>
<p>我是center</p>
<p>我是center</p>
<p>我是center</p>
</div>
<div class="bottom4">我是bottom</div>
</div>
</article>
</section>
</body>
</html>
3、まとめ
- この問題の解決策は何ですか？
絶対配置/フレックスボックス/テーブルレイアウト/グリッドレイアウト;
コンテンツの各部分が独自のブロックレベル要素であるコンテンツ内にある限り、上部、中央、下部の3列レイアウトは上記のレイアウト方法を適用する必要はありません。上から下に自動的に配布されます。
-コードの「Html * {...}」はグローバルに適用できます。テーブルレイアウト
-solutionでは、外側のレイヤーはdisplay：tableを使用する必要があり、内側のサブ要素はdisplay：table-columnを使用する必要があります。で
グリッドレイアウト溶液、コードが外側包装紙、ディスプレイに直接適用：グリッド、グリッドテンプレート行は複数の列を追加するために、複数の行、及びグリッドテンプレート列を追加します。
※コードにはまだまだ欠点がたくさんありますので、いろいろな意見を出し合い、コミュニケーションを図っていきたいと思います。*