Topic: Assuming the height is known, please write out three columns layout, in which the width of left column and right column are 300 px, and the middle column is adaptive.
Five schemes for three-column layout
This is a classic interview question. Below are five methods of 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>Three column layout</title>
<style>
* {
margin: 0;
padding: 0;
}
</style>
</head>
<body>
<!--5 Solutions-->
</body>
1. Floating Solution
<!-- 1\. Floating Solution -->
<scetion class="layout float">
<!-- style -->
<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>
<!-- structure -->
<!-- Be careful:Right-floating in structure div Be sure to write in center In front of,Otherwise invalid. -->
<h2>Three column layout</h2>
<article class="left-ritgh-center">
<div class="left"></div>
<div class="right"></div>
<div class="center">
<h2>Floating Solution</h2>
1.This is a floating solution for three-column layout.
2.This is a floating solution for three-column layout.
3.This is a floating solution for three-column layout.
4.This is a floating solution for three-column layout.
5.This is a floating solution for three-column layout.
6.This is a floating solution for three-column layout.
</div>
</article>
</scetion>
2. Absolute positioning solution
<!-- 2\. Absolute positioning solution -->
<section class="layout absolute">
<!-- style -->
<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>
<!-- structure -->
<h1>Three column layout</h1>
<article class="left-center-right">
<div class="left"></div>
<div class="center">
<h2>Absolute positioning solution</h2>
1.This is the absolute positioning solution for the three-column layout.
2.This is the absolute positioning solution for the three-column layout.
3.This is the absolute positioning solution for the three-column layout.
4.This is the absolute positioning solution for the three-column layout.
5.This is the absolute positioning solution for the three-column layout.
6.This is the absolute positioning solution for the three-column layout.
</div>
<div class="right"></div>
</article>
</section>
3. flexbox solution
<!-- 3\. flexbox Solution -->
<section class="layout flexbox">
<!-- style -->
<style>
/* flexbox The solution is blocked by the absolute positioning solution above when it is displayed in the browser. Set up a margin-top */
.layout.flexbox {
margin-top: 110px;
}
/* Set minimum height */
.layout.flexbox article div {
min-height: 80px;
}
.layout.flexbox article {
display: flex;
}
.layout.flexbox .left {
width: 300px;
background-color: red;
}
.layout.flexbox .center {
/*center Partial growth fills the whole line*/
flex: 1;
background-color: yellow;
}
.layout.flexbox .right {
width: 300px;
background-color: blue;
}
</style>
<!-- structure -->
<h1>Three column layout</h1>
<article class="left-center-right">
<div class="left"></div>
<div class="center">
<h2>flexbox Solution</h2>
1.This is a three-column layout. flexbox Solution;
2.This is a three-column layout. flexbox Solution;
3.This is a three-column layout. flexbox Solution;
4.This is a three-column layout. flexbox Solution;
5.This is a three-column layout. flexbox Solution;
6.This is a three-column layout. flexbox Solution;
</div>
<div class="right"></div>
</article>
</section>
4. Table Layout Solution
<!-- 4\. Table Layout Solution -->
<section class="layout table">
<!-- style -->
<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>
<!-- structure -->
<h1>Three column layout</h1>
<article class="left-center-right">
<div class="left"></div>
<div class="center">
<h2>Table Layout Solution</h2>
1.This is a table layout solution with three columns layout.
2.This is a table layout solution with three columns layout.
3.This is a table layout solution with three columns layout.
4.This is a table layout solution with three columns layout.
5.This is a table layout solution with three columns layout.
6.This is a table layout solution with three columns layout.
</div>
<div class="right"></div>
</article>
</section>
5. Grid Layout Solution
<!-- 5\. Grid Layout Solution -->
<section class="layout grid">
<!-- style -->
<style>
.layout.grid .left-center-right {
width: 100%;
display: grid;
/* Grid height */
grid-template-rows: 100px;
/* Grid column width */
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>
<!-- structure -->
<h1>Three column layout</h1>
<article class="left-center-right">
<div class="left"></div>
<div class="center">
<h2>Grid Layout Solution</h2>
1.This is a three-column grid layout solution.
2.This is a three-column grid layout solution.
3.This is a three-column grid layout solution.
4.This is a three-column grid layout solution.
5.This is a three-column grid layout solution.
6.This is a three-column grid layout solution.
</div>
<div class="right"></div>
</article>
</section>
Narrow the browser window and you can see the changes. Because the height set in the above code is min-width, not fixed height width, so now we see that the height is not fixed.
Analysis of Five Layout Schemes with Different Effects under Uncertain Height
- In the floating solution, the center part will be upgraded and expanded to both sides, and the size of the boxes on both sides will not be affected.
- Absolute positioning solution: the center part will be upgraded by the content, without expanding to both sides, and the size of the boxes on both sides will not be affected.
- In flexbox solutions: the center section is elevated by content, and the boxes on both sides are always aligned with the center height.
This is because in flex layout, the align-items attribute defaults to stretch, and if set to: align-items: center; or align-items: start; or align-items: end; or other values, it will not automatically remain the same height.
- In the table layout solution: the center section is supported by the content, and the boxes on both sides are always aligned with the center height.
- In the grid layout solution: the box size does not change, the text directly exceeds the center part.
In order to help you make learning easy and efficient, we will share a large number of information for free, and help you to overcome difficulties on the way to becoming a front-end engineer and even a whole stack engineer. Here we recommend a front-end stack learning button qun: 784783012. Welcome to the group for discussion, learning and communication, and common progress.
When you really start learning, you will inevitably not know where to start, which leads to inefficiency and affects the confidence to continue learning.
But the most important thing is not to know which technologies need to be mastered, learning frequently trample holes, and ultimately waste a lot of time, so effective resources are still necessary.