Article Directory
1. Topic
Give your answer based on the question.
(The height of the upper and lower columns is fixed, and the middle is adaptive)
Topic: Assuming the width is known, please write a three-column layout, where the height of the upper and lower columns is 150px, and the middle is adaptive.
Second, my code details
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>
Three, summary
- What are the solutions to this problem?
Absolute positioning / flexbox / table layout / grid layout; the
top, middle and bottom three-column layout does not need to apply the above layout method, as long as each part of the content is in its own block-level element, the content will be automatically distributed from top to bottom.
-"Html *{...}" in the code can be applied globally; in the table layout
-solution, the outer layer needs to use display:table; the inner sub-elements need to use display: table-column; -in the
grid layout solution, the code Apply directly to the outer wrapper, display: grid; grid-template-rows to add multiple rows, and grid-template-columns to add multiple columns.
*There are still many shortcomings in the code. We hope to put forward different opinions and communicate with each other. *