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 use LibreOffice to convert document formats under CentOS
Project requirements require some preprocessing o...
The concept of MySQL tablespace fragmentation and solutions to related problems
Table of contents background What is tablespace f...
Recommended 20 best free English handwriting fonts
Jellyka BeesAntique Handwriting [ank]* Jellyka Cut...
Using loops in awk
Let's learn about different types of loops th...
Detailed explanation of LVM seamless disk horizontal expansion based on Linux
environment name property CPU x5650 Memory 4G dis...
HTML page jump code
Save the following code as the default homepage fi...
JavaScript to implement limited time flash sale function
This article shares the specific code of JavaScri...
Vue encapsulation component tool $attrs, $listeners usage
Table of contents Preface $attrs example: $listen...
Docker private warehouse harbor construction process
1. Preparation 1.1 harbor download harbor downloa...
CSS animation property usage and example code (transition/transform/animation)
During development, a good user interface will al...
JS realizes automatic playback of timeline
Recently, I have implemented such an effect: clic...
Detailed explanation of Vue project optimization and packaging
Table of contents Preface 1. Routing lazy loading...
Use SQL statement to determine whether the record already exists before insert
Table of contents Determine whether a record alre...
A case study to thoroughly understand how to correctly use MySQL inndb joint index
There is a business that queries the 5 most recen...
Detailed tutorial on how to automatically install CentOS7.6 using PXE
1. Demand The base has 300 new servers, and needs...