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
web Front-end development learning Q-q-u-n: 767273102 ，Share learning methods and small details that need attention, and keep updating the latest teaching and learning methods (detailed front-end project teaching video)
<!-- 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 Front,Otherwise, it will be 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
web Front-end development learning Q-q-u-n: 767273102 ，Share learning methods and small details that need attention, and keep updating the latest teaching and learning methods (detailed front-end project teaching video)
<!-- 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 row height */
grid-template-rows: 100px;
/* Mesh 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.
Small partners who are interested in web front-end technology can join our learning circle. They have been working for the sixth year. They can share some learning methods and details of practical development. 767-273-102 autumn skirt. How to learn the front-end from the zero foundation? They are all people with dreams. We may be in different cities, but we will travel together. Front end, front end, front end
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.