Several ways to implement a three-column layout
Foreword
The three-column layout, as the name suggests, is fixed on both sides and adaptive in the middle . The three-column layout is very common in actual development. For example, the homepage of Taobao.com is a typical three-column layout: the left product navigation and the right navigation have a fixed width, and the main content in the middle adapts to the width of the browser.
We might as well assume such a layout: the height is known, the width of the left column and the right column are 300px each, and the middle is adaptive. Several methods can be used to achieve this? And what are the advantages and disadvantages of each?
1. Floating layout
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Layout</title>
<style media="screen">
html * {
padding: 0;
margin: 0;
}
.layout article div {
min-height: 150px;
}
</style>
</head>
<body>
<section class="layout float">
<style media="screen">
.layout.float .left {
float: left;
width: 300px;
background: red;
}
.layout.float .center {
background: yellow;
}
.layout.float .right {
float: right;
width: 300px;
background: blue;
}
</style>
<h1>Three-column layout</h1>
<article class="left-right-center">
<div class="left"></div>
<div class="right"></div> // The right column should be written before the middle content
<div class="center">
<h2>Floating solution</h2>
1. This is a floating solution for a three-column layout; 2. This is a floating solution for a three-column layout;
3. This is a floating solution for a three-column layout; 4. This is a floating solution for a three-column layout;
5. This is the floating solution of the three-column layout; 6. This is the floating solution of the three-column layout;
</div>
</article>
</section>
</body>
</html>
In this layout, the DOM structure must be written in the floating part first, and then the middle block, otherwise the right floating block will fall to the next line.
The advantage of floating layout is that it is simpler and has better compatibility. However, the floating layout has limitations. The floating element is separated from the document flow and needs to be cleared. If this is not handled properly, it will bring many problems, such as the collapse of the height of the parent container .
2. Absolute layout
<!--Absolute layout -->
<section class="layout absolute">
<style>
.layout.absolute .left-center-right>div{
position: absolute;//The three blocks are absolutely positioned
}
.layout.absolute .left {
left: 0;
width: 300px;
background: red;
}
.layout.absolute .center {
right: 300px;
left: 300px;//300 left and right
background: yellow;
}
.layout.absolute .right {
right: 0;
width: 300px;
background: blue;
}
</style>
<h1>Three-column layout</h1>
<article class="left-center-right">
<div class="left"></div>
<div class="center">
<h2>Absolute positioning solutions</h2>
1. This is a floating solution for a three-column layout; 2. This is a floating solution for a three-column layout; 3. This is a floating solution for a three-column layout; 4. This is a floating solution for a three-column layout; 5. This is the floating solution of the three-column layout; 6. This is the floating solution of the three-column layout;
</div>
<div class="right"></div>
</article>
</section>
The advantage of absolute positioning layout is that it is fast, easy to set up, and not prone to problems. The disadvantage is that the container is separated from the document flow, and the descendant elements are also separated from the document flow. When the height is unknown, there will be problems, which leads to the poor effectiveness and usability of this method.
3. flexbox layout
<!--flexbox layout-->
<section class="layout flexbox">
<style>
.layout.flexbox .left-center-right{
display: flex;
}
.layout.flexbox .left {
width: 300px;
background: red;
}
.layout.flexbox .center {
background: yellow;
flex: 1;
}
.layout.flexbox .right {
width: 300px;
background: blue;
}
</style>
<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 floating solution for a three-column layout; 2. This is a floating solution for a three-column layout; 3. This is a floating solution for a three-column layout; 4. This is a floating solution for a three-column layout; 5. This is the floating solution of the three-column layout; 6. This is the floating solution of the three-column layout;
</div>
<div class="right"></div>
</article>
</section>
The flexbox layout is a new one in CSS3. It is a perfect one to solve the shortcomings of the above two methods. At present, the layout of the mobile terminal also uses flexbox. The disadvantage of flexbox is that IE10 began to support, but IE10 is in the form of -ms.
4. the table layout
<!--Table Layout-->
<section class="layout table">
<style>
.layout.table .left-center-right {
display: table;
height: 150px;
width: 100%;
}
.layout.table .left-center-right>div {
display: table-cell;
}
.layout.table .left {
width: 300px;
background: red;
}
.layout.table .center {
background: yellow;
}
.layout.table .right {
width: 300px;
background: blue;
}
</style>
<h1>Three-column layout</h1>
<article class="left-center-right">
<div class="left"></div>
<div class="center">
<h2>Table Layout Solutions</h2>
1. This is a floating solution for a three-column layout; 2. This is a floating solution for a three-column layout; 3. This is a floating solution for a three-column layout; 4. This is a floating solution for a three-column layout; 5. This is the floating solution of the three-column layout; 6. This is the floating solution of the three-column layout;
</div>
<div class="right"></div>
</article>
</section>
The compatibility of the table layout is very good (see the figure below). When the flex layout is not compatible, you can try the table layout. When the content overflows, the parent element is automatically stretched .
The table layout is also flawed: 1. It is impossible to set the column margins; 2. It is not friendly to SEO; 3. When one of the cells exceeds the height, the cells on both sides will also become taller, but sometimes this is not us. desired effect.
5. Grid Layout
<!--Grid Layout-->
<section class="layout grid">
<style>
.layout.grid .left-center-right {
display: grid;
width: 100%;
grid-template-columns: 300px auto 300px;
grid-template-rows: 150px;//row height
}
.layout.grid .left {
background: red;
}
.layout.grid .center {
background: yellow;
}
.layout.grid .right {
background: blue;
}
</style>
<h1>Three-column layout</h1>
<article class="left-center-right">
<div class="left"></div>
<div class="center">
<h2>Grid Layout Solutions</h2>
1. This is a floating solution for a three-column layout; 2. This is a floating solution for a three-column layout; 3. This is a floating solution for a three-column layout; 4. This is a floating solution for a three-column layout; 5. This is the floating solution of the three-column layout; 6. This is the floating solution of the three-column layout;
</div>
<div class="right"></div>
</article>
</section>
CSS Grid is the most powerful and easiest tool for creating grid layouts. Like tables, grid layouts allow web designers to align elements in columns or rows, but unlike tables, grid layouts have no content structure, making it impossible for various layouts to behave like tables. For example, child elements in a grid layout can all position themselves so that they can overlap and position similar elements .
But the compatibility of grid layout is not good. It is supported on IE10+, and only some properties are supported .
6. Summary
By introducing the advantages and disadvantages of the five layouts in detail above, which layout is the best choice in actual development? I believe readers will have their own answers in mind.
I think flex and grid layout can handle the layout in actual development. Assuming that the browser supports these two modules, will you choose grid or flexbox to layout the page? Flexbox is a one-dimensional layout, he can only place your content blocks in a straight line; while grid is a two-dimensional layout. As mentioned earlier, you can place content blocks anywhere you want according to your design needs . So without further ado, you should know which one is better for your layout. In addition, if you want to be compatible with lower versions of IE (such as IE8+), you can consider table layout.
Finally, let me ask you a question. If the middle part is stretched by the height of the content, the left and right columns need to be stretched. Which of these five layouts can still be used?
Answer: flex layout and table layout