Detailed explanation of CSS multiple three-column adaptive layout implementation
PrefaceIn order to follow the conventional WEB layout, all of them are written in left-center-right layout with header and footer mode. The first one: based on float implementationImplementation ideas Conventional thinking is to make the left and right Aside float to the left and right sides respectively. Code Implementation
<!-- HTML section -->
<div class="container">
<!-- Top Header -->
<header>Here is the header</header>
<!-- Aside and content in the middle -->
<div class="middle clearfix">
<aside class="left"></aside>
<aside class="right"></aside>
<!-- The middle content is placed below the right column to prevent the right side from being squeezed down. -->
<div class="content">Here is the content</div>
</div>
<!-- Footer -->
<footer></footer>
</div>
<!-- CSS section -->
<style lang="scss">
* {
margin: 0;
padding: 0;
}
.clearfix {
zoom: 1;
&::after {
display: block;
content: ' ';
clear:both
}
}
html, body {
width: 100%;
height: 100%
}
.container {
width: 100%
height: 100%
header {
height: 80px;
background: rgba(0, 0, 0, 0.5)
}
footer {
height: 80px;
background: rgba(0, 0, 0, 0.5)
}
.middle {
height: calc(100% - 80px - 80px)
aside
height: 100%;
width: 300px;
background: rgba(156, 154, 249, 1)
}
.left {
float: left
}
.right: {
float: right
}
}
}
}
</style>
Achieve results
The second method: based on position: absolute implementationImplementation ideas Assign position: relative to the parent of the three middle columns, and assign position: absolute to the left and right Aside columns, and assign left: 0 and right: 0 width: custom values respectively. Assign the middle content left and right to the same width as the left and right widths respectively. Code Implementation
<!-- HTML related code-->
<div class="container">
<!-- Top Header -->
<header></header>
<div class="middle">
<!-- Left Aside -->
<aside class="left"></aside>
<!-- Middle content -->
<div class="content">Here is the content</div>
<!-- Right Aside -->
<aside class="right"></aside>
</div>
<!-- Footer -->
<footer></footer>
</div>
<!-- CSS related code-->
<style lang="scss">
* {
margin: 0;
padding: 0
}
html, body {
width: 100%;
height: 100%
}
.container {
width: 100%;
height: 100%;
header {
height: 80px;
background: rgba(0, 0, 0, 0.5);
}
footer {
height: 80px;
background: rgba(0, 0, 0, 0.5);
}
.middle {
height: calc(100% - 80px - 80px);
position: relative;
aside,
.content {
position: absolute;
}
.left {
width: 300px;
background: rgba(156, 154, 249, 1);
left: 0;
height: 100%;
}
.right {
width: 300px;
background: rgba(156, 154, 249, 1);
right: 0;
height: 100%;
}
.content {
left: 300px;
right: 300px;
}
}
}
</style>
Achieve results
The third method: based on display: flexImplementation ideas Give the left, middle and right columns parent display: flex, give the left and right Aside widths custom values, and give the middle content flex:1 Code Implementation
<!-- HTML related code-->
<div class="container">
<!-- Top Header -->
<header></header>
<div class="middle">
<!-- Left Aside -->
<aside class="left"></aside>
<!-- Middle content -->
<div class="content">Here is the content</div>
<!-- Right Aside -->
<aside class="right"></aside>
</div>
<!-- Footer -->
<footer></footer>
</div>
<!-- CSS section -->
<style lang="scss">
* {
margin: 0;
padding: 0;
}
html, body {
width: 100%;
height: 100%;
}
.container {
header {
height: 80px;
background: rgba(0, 0, 0, 0.5);
}
footer {
height: 80px;
background: rgba(0, 0, 0, 0.5);
}
.middle {
display: flex;
height: calc(100% - 80px - 80px);
aside
width: 300px;
background: rgba(156, 154, 249, 1);
}
.content: {
flex: 1;
}
}
}
</style>
Achieve results
The fourth method: based on display: table implementationImplementation ideas Give the parent of the left, middle and right columns display: table, width: 100%, give the left, middle and right columns display: table-cell respectively, and give the left and right Aside width respectively. Code Implementation
<!-- HTML related code-->
<div class="container">
<!-- Top Header -->
<header></header>
<div class="middle">
<!-- Left Aside -->
<aside class="left"></aside>
<!-- Middle content -->
<div class="content">Here is the content</div>
<!-- Right Aside -->
<aside class="right"></aside>
</div>
<!-- Footer -->
<footer></footer>
</div>
<!-- CSS section -->
<style lang="scss">
* {
margin: 0;
padding: 0;
}
html, body {
width: 100%;
height: 100%;
}
.container {
header {
height: 80px;
background: rgba(0, 0, 0, 0.5);
}
footer {
height: 80px;
background: rgba(0, 0, 0, 0.5);
}
.middle {
display: table;
width: 100%
height: calc(100% - 80px - 80px);
aside
width: 300px;
display: table-cell;
background: rgba(156, 154, 249, 1);
}
.content: {
display: table-cell;
}
}
}
</style>
Achieve results
Fifth: based on display: grid implementationImplementation ideas Give the left, middle and right columns parent display: grid, and use grid-template-columns: 300px auto 300px to divide them into three columns with widths of 300px, auto, and 300px. Code Implementation
<!-- HTML related code-->
<div class="container">
<!-- Top Header -->
<header></header>
<div class="middle">
<!-- Left Aside -->
<aside class="left"></aside>
<!-- Middle content -->
<div class="content">Here is the content</div>
<!-- Right Aside -->
<aside class="right"></aside>
</div>
<!-- Footer -->
<footer></footer>
</div>
<!-- CSS section -->
<style lang="scss">
* {
margin: 0;
padding: 0;
}
html, body {
width: 100%;
height: 100%;
}
.container {
header {
height: 80px;
background: rgba(0, 0, 0, 0.5);
}
footer {
height: 80px;
background: rgba(0, 0, 0, 0.5);
}
.middle {
display: grid;
grid-template-columns: 300px auto 300px;
height: calc(100% - 80px - 80px);
aside
background: rgba(156, 154, 249, 1);
}
}
}
</style>
Achieve results
This concludes this article on the detailed explanation of the implementation of various three-column adaptive layouts in CSS. For more relevant CSS three-column adaptive layout content, please search for previous articles on 123WORDPRESS.COM or continue to browse the related articles below. I hope that everyone will support 123WORDPRESS.COM in the future! |
<<: Use of select, distinct, and limit in MySQL
>>: Explore the characteristics and expressions of different spaces in HTML (recommended)
Recommend
MySQL 8.0.13 installation and configuration method graphic tutorial under win10
I would like to share the installation and config...
Steps to package and deploy the Vue project to the Apache server
In the development environment, the vue project i...
Vue implements multi-tab component
To see the effect directly, a right-click menu ha...
Example of Vue implementing fixed bottom component
Table of contents 【Effect】 【Implementation method...
Docker starts MySQL configuration implementation process
Table of contents Actual combat process Let's...
A brief introduction to Tomcat's overall structure
Tomcat is widely known as a web container. It has...
How to deploy gitlab using Docker-compose
Docker-compose deploys gitlab 1. Install Docker I...
How to set remote access permissions in MySQL 8.0
The previous article explained how to reset the M...
In-depth analysis of MySQL from deleting the database to running away_Advanced (I) - Data Integrity
1. Introduction to Data Integrity 1. Introduction...
Advanced and summary of commonly used sql statements in MySQL database
This article uses examples to describe the common...
Detailed example of database operation object model in Spring jdbc
Detailed example of database operation object mod...
Solution to the problem that mysql local login cannot use port number to log in
Recently, when I was using Linux to log in locall...
How to deploy DoNetCore to Alibaba Cloud with Nginx
Basic environment configuration Please purchase t...
Summary of solving the yum error problem after upgrading Python to 3.6.6 on CentOS 7
I recently upgraded a test server operating syste...
Optimization analysis of Limit query in MySQL optimization techniques
Preface In actual business, paging is a common bu...