CSS implements six adaptive two-column layout methods
|
HTML structure
<body>
<div class="wrapper">
<div class="left"></div>
<div class="right"></div>
</div>
</body>
Method 1: flex layout
.wrapper{
display:flex;
}
.left{
width:200px;
height:400px;
background:black;
}
.right{
flex:1;
height:400px;
background:red;
}
Method 2: Floating
.left{
float:left;
width:200px;
height:400px;
background:black;
}
.right{
background:red;
height:400px;
}
Method 3: BFC
.left{
width:200px;
height:400px;
float:left;
background:black;
}
.right{
overflow:hidden;
height:400px;
background:red;
}
Method 4: absolute positioning
.wrapper{
position:relative;
}
.left{
width:200px;
height:400px;
background:black;
}
.right{
position:absolute;
top:0;
left:200px;
right:0;
bottom:0;
background:red;
}
Method 5: table layout
.wrapper{
display:table;
width:100%;
}
.left,.right{
display:table-cell;
height:400px
}
.left{
background:black;
}
.right{
background:red;
}
Method 6: Grid layout
.wrapper{
display:grid;
width:100%;
height:400px;
grid-template-columns:200px auto;
}
.left{
background:black;
}
.right{
background:red;
}
This concludes this article about how to implement six adaptive two-column layouts with CSS. For more information about adaptive two-column layouts with CSS, please search previous articles on 123WORDPRESS.COM or continue browsing the related articles below. I hope you will support 123WORDPRESS.COM in the future! |
<<: Docker cross-server communication overlay solution (Part 1) Consul single instance
>>: How to reference jQuery in a web page
Recommend
How to View All Running Processes in Linux
You can use the ps command. It can display releva...
Mysql uses stored procedures to quickly add millions of data sample code
Preface In order to reflect the difference betwee...
In-depth understanding of Vue's plug-in mechanism and installation details
Preface: When we use Vue, we often use and write ...
Vue.js implements simple timer function
This article example shares the specific code of ...
Solve the problem of case sensitivity of Linux+Apache server URL
I encountered a problem today. When entering the ...
Vue implements time countdown function
This article example shares the specific code of ...
Unable to define IE6 font: 13px size is invalid, IE6 automatically displays a larger font solution
A few days ago, when I was adjusting a module of a...
Detailed explanation of 30 SQL query optimization techniques for MySQL tens of millions of large data
1. To optimize the query, try to avoid full table...
Nginx try_files directive usage examples
Nginx's configuration syntax is flexible and ...
Implementation of CSS Fantastic Border Animation Effect
Today I was browsing the blog site - shoptalkshow...
Install Linux using VMware virtual machine (CentOS7 image)
1. VMware download and install Link: https://www....
Analysis of the difference between placing on and where in MySQL query conditions
Introduction When writing SQL today, I encountere...
Detailed explanation of nginx request header data reading process
In the previous article, we explained how nginx r...
Two ways to correctly clean up mysql binlog logs
mysql correctly cleans up binlog logs Preface: Th...
Detailed explanation of the alternative implementation code of CSS vertical centering (unconventional)
Preface As we all know, "How to vertically c...