Article Directory
1. Topic
Give your answer based on the question.
(The width of the left column is fixed, the right column is adaptive)
Title: The known height is 100px, the left width is fixed 150px, and the right width is adaptive.
Second, my code details
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>
Three, summary
-
What are the solutions to this problem?
Floating/absolute positioning/flexbox/table layout/grid layout; -
The advantages and disadvantages of each program?
1) Floating
Excellent: Simple
Lacking: Break away from the document flow and need to be combined with BFC application
2) Absolute positioning
Excellent: Simple
Lacking:
Break away from the document flow and need to be combined with BFC application, with more code 3) Excellent flexbox
: Simple and fast, good compatibility
4) Table layout
excellent: better compatibility.
Lack: the height of each column will change at the same time; the table needs to be rendered first, and the page generation speed is delayed.
5) Grid layout is
excellent: it can realize complex operations with multiple rows and multiple columns and has better compatibility. Simplify the code -
Are there any compatible solutions?
flexbox, grid layout
*There are still many shortcomings in the code. We hope to put forward different opinions and communicate with each other. *