Title: height assume known, please write three-column layout, where the left column, right column width 300px by each, intermediate adaptation.
Five kinds of three-column layout scheme
This is a classic face questions, record the following five methods css layout.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>三栏布局</title>
<style>
* {
margin: 0;
padding: 0;
}
</style>
</head>
<body>
<!--5种解决方案-->
</body>1. Floating Solutions
<!-- 1\. 浮动解决方案 -->
<scetion class="layout float">
<!-- 样式 -->
<style media="screen">
.layout.float article div {
min-height: 80px;
}
.layout.float .left {
width: 300px;
background-color: red;
float: left;
}
.layout.float .center {
background-color: yellow;
}
.layout.float .right {
width: 300px;
background-color: blue;
float: right;
}
</style>
<!-- 结构 -->
<!-- 注意:结构中 右浮动的div一定要写在 center 的前面,否则无效. -->
<h2>三栏布局</h2>
<article class="left-ritgh-center">
<div class="left"></div>
<div class="right"></div>
<div class="center">
<h2>浮动解决方案</h2>
1.这是三栏布局的浮动解决方案；
2.这是三栏布局的浮动解决方案；
3.这是三栏布局的浮动解决方案；
4.这是三栏布局的浮动解决方案；
5.这是三栏布局的浮动解决方案；
6.这是三栏布局的浮动解决方案；
</div>
</article>
</scetion>2. Absolute positioning solution
<!-- 2\. 绝对定位解决方案 -->
<section class="layout absolute">
<!-- 样式 -->
<style>
.layout.absolute article div {
min-height: 80px;
position: absolute;
}
.layout.absolute .left {
width: 300px;
background-color: red;
left: 0;
}
.layout.absolute .center {
background-color: yellow;
left: 300px;
right: 300px;
}
.layout.absolute .right {
width: 300px;
background-color: blue;
right: 0;
}
</style>
<!-- 结构 -->
<h1>三栏布局</h1>
<article class="left-center-right">
<div class="left"></div>
<div class="center">
<h2>绝对定位解决方案</h2>
1.这是三栏布局的绝对定位解决方案；
2.这是三栏布局的绝对定位解决方案；
3.这是三栏布局的绝对定位解决方案；
4.这是三栏布局的绝对定位解决方案；
5.这是三栏布局的绝对定位解决方案；
6.这是三栏布局的绝对定位解决方案；
</div>
<div class="right"></div>
</article>
</section>3. flexbox Solutions
<!-- 3\. flexbox解决方案 -->
<section class="layout flexbox">
<!-- 样式 -->
<style>
/* flexbox解决方案在浏览器中显示时被上面的绝对定位解决方案挡住了,设置一个margin-top */
.layout.flexbox {
margin-top: 110px;
}
/* 设置最低高度 */
.layout.flexbox article div {
min-height: 80px;
}
.layout.flexbox article {
display: flex;
}
.layout.flexbox .left {
width: 300px;
background-color: red;
}
.layout.flexbox .center {
/*center部分增长 使整行填充*/
flex: 1;
background-color: yellow;
}
.layout.flexbox .right {
width: 300px;
background-color: blue;
}
</style>
<!-- 结构 -->
<h1>三栏布局</h1>
<article class="left-center-right">
<div class="left"></div>
<div class="center">
<h2>flexbox解决方案</h2>
1.这是三栏布局的flexbox解决方案；
2.这是三栏布局的flexbox解决方案；
3.这是三栏布局的flexbox解决方案；
4.这是三栏布局的flexbox解决方案；
5.这是三栏布局的flexbox解决方案；
6.这是三栏布局的flexbox解决方案；
</div>
<div class="right"></div>
</article>
</section>4. The table layout solutions
<!-- 4\. 表格布局解决方案 -->
<section class="layout table">
<!-- 样式 -->
<style>
.layout.table .left-center-right {
width: 100%;
min-height: 80px;
display: table;
}
.layout.table .left-center-right>div {
display: table-cell;
}
.layout.table .left {
width: 300px;
background-color: red;
}
.layout.table .center {
background-color: yellow;
}
.layout.table .right {
width: 300px;
background-color: blue;
}
</style>
<!-- 结构 -->
<h1>三栏布局</h1>
<article class="left-center-right">
<div class="left"></div>
<div class="center">
<h2>表格布局解决方案</h2>
1.这是三栏布局的表格布局解决方案；
2.这是三栏布局的表格布局解决方案；
3.这是三栏布局的表格布局解决方案；
4.这是三栏布局的表格布局解决方案；
5.这是三栏布局的表格布局解决方案；
6.这是三栏布局的表格布局解决方案；
</div>
<div class="right"></div>
</article>
</section>The grid layout solutions
<!-- 5\. 网格布局解决方案 -->
<section class="layout grid">
<!-- 样式 -->
<style>
.layout.grid .left-center-right {
width: 100%;
display: grid;
/* 网格行高 */
grid-template-rows: 100px;
/* 网格列宽 */
grid-template-columns: 300px auto 300px;
}
.layout.grid .left {
background-color: red;
}
.layout.grid .center {
background-color: yellow;
}
.layout.grid .right {
background-color: blue;
}
</style>
<!-- 结构 -->
<h1>三栏布局</h1>
<article class="left-center-right">
<div class="left"></div>
<div class="center">
<h2>网格布局解决方案</h2>
1.这是三栏布局的网格布局解决方案；
2.这是三栏布局的网格布局解决方案；
3.这是三栏布局的网格布局解决方案；
4.这是三栏布局的网格布局解决方案；
5.这是三栏布局的网格布局解决方案；
6.这是三栏布局的网格布局解决方案；
</div>
<div class="right"></div>
</article>
</section>Narrowing the browser window, you can see the change. Since the height of the above code is provided min-width, rather than setting a fixed height width, so it is highly see fixed.
Analysis Program layouts showing different effects in the case where the height is not fixed
- Floating solution: center section will be expanded on both sides to hold high content, the size of the sides of the box are not affected.
- Absolute positioning solution: center part of the support will be content high, do not expand to both sides, both sides of the box size is not affected.
- flexbox solution: center support part of the content is high, and both sides of the center height of the box is always consistent.
This is because the flex layout, align-items property defaults to stretch, if set to: align-items: center; or align-items: start; or align-items: end; or other value, then it will not automatically keep same height.
- Table layout solution: center part will be content stays high, and both sides of the box and center height is always consistent.
- Grid layout solutions: no change in the size of the box, beyond the center portion of text directly.
To help make learning easy, efficient and free for everyone to share a large number of resources to help you become the front-end engineers, and even the way through the clutter full stack engineers. We are here to recommend a front-end full-stack learning buckle qun: 784783012 Welcome to flow into ××× discussion, learning exchanges and common progress.
When the real beginning of learning will inevitably do not know where to start, leading to inefficiencies affect confidence to continue learning.
But the most important thing is I do not know what needs to master key technologies, frequently stepped pit learning, end up wasting a lot of time, it is effective or necessary resources.