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
Complete step record of Vue encapsulation of general table components
Table of contents Preface Why do we need to encap...
Open the Windows server port (take port 8080 as an example)
What is a Port? The ports we usually refer to are...
Detailed tutorial on configuring nginx for https encrypted access
environment: 1 CentOS Linux release 7.5.1804 (Cor...
Let's talk about the problem of Vue integrating sweetalert2 prompt component
Table of contents 1. Project Integration 1. CDN i...
Teach you 10 ways to center horizontally and vertically in CSS (summary)
A must-have for interviews, you will definitely u...
Vue3 Vue Event Handling Guide
Table of contents 1. Basic event handling 2. Send...
Is it necessary to create a separate index for the MySQL partition field column?
Preface Everyone knows that the partition field m...
In-depth analysis of MySQL indexes
Preface We know that index selection is the work ...
Ubuntu Server 18.04.5 LTS Server Edition Installation and Configuration Graphic Tutorial
1. Ubuntu Server 18.04.5 LTS system installation ...
jQuery plugin to implement dashboard
The jquery plug-in implements the dashboard for y...
Implementation of removing overlapping time and calculating time difference in MySQL
Table of contents need: drive: Ideas: accomplish:...
JavaScript to achieve JD.com flash sale effect
This article shares the specific code of JavaScri...
Detailed explanation of MySQL master-slave replication process
1. What is master-slave replication? The DDL and ...
jQuery realizes image highlighting
It is very common to highlight images on a page. ...
Basic usage of find_in_set function in mysql
Preface This is a new function I came across rece...