4 ways to achieve a two-column layout with fixed left column and adaptive right column using CSS
|
1. float+overflow:hidden This method mainly triggers BFC through overflow, and BFC will not overlap floating elements. Since setting overflow:hidden does not trigger the haslayout property of IE6-browser, you need to set zoom:1 to be compatible with IE6-browser. The specific code is as follows:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
<style>
.parent {
margin: 0 auto; // Make the parent container horizontally centered overflow: hidden;
zoom: 1;
max-width: 1000px;
}
.left {
float: left;
margin-right: 20px;
width: 200px;
background-color: green;
}
.right {
overflow: hidden;
zoom: 1;
background-color: yellow;
}
</style>
</head>
<body>
<div class="parent">
<div class="left">
<p>left left left left</p>
</div>
<div class="right">
<p>right</p>
<p>right</p>
</div>
</div>
</body>
</html>
2. float: left + margin-left Float makes the element on the left out of the document flow, and the element on the right can be displayed on the same line as the element on the left. Set margin-left so that the element on the right does not cover the element on the left. The code is as follows:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
<style>
.parent {
margin: 0 auto;
max-width: 1000px;
}
.parent::after {
content: '';
display: table;
clear: both;
}
.left {
float: left;
width: 200px;
background-color: green;
}
.right {
margin-left: 200px;
background-color: yellow;
}
</style>
</head>
<body>
<div class="parent">
<div class="left">
<p>left left left left</p>
</div>
<div class="right">
<p>right</p>
<p>right</p>
<p>right</p>
</div>
</div>
</body>
</html> 3. position: absolute + margin-left Absolute positioning on the left and setting margin-left on the right, the code is as follows:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
<style>
.parent {
position: relative;
margin: 0 auto;
max-width: 1000px;
}
.left {
position: absolute;
width: 200px;
background-color: green;
}
.right {
margin-left: 200px;
background-color: yellow;
}
</style>
</head>
<body>
<div class="parent">
<div class="left">
<p>left left left left</p>
</div>
<div class="right">
<p>right</p>
<p>right</p>
<p>right</p>
</div>
</div>
</body>
</html>
4. Flex layout Flex layout can make two child elements appear in the same row. As long as the width on the left is fixed, the effect can be achieved. The code is as follows:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
<style>
.parent {
display: flex;
margin: 0 auto;
max-width: 1000px;
}
.left {
width: 200px;
background-color: green;
}
.right {
margin-left: 20px;
flex: 1;
background-color: yellow;
}
</style>
</head>
<body>
<div class="parent">
<div class="left">
<p>left left left left</p>
</div>
<div class="right">
<p>right</p>
<p>right</p>
<p>right</p>
</div>
</div>
</body>
</html>This concludes this article about 4 ways to achieve a two-column layout with CSS, with a fixed left and adaptive right. For more information about achieving a two-column layout with CSS, please search for previous articles on 123WORDPRESS.COM or continue to browse the related articles below. I hope you will support 123WORDPRESS.COM in the future! |
<<: Zabbix monitoring docker application configuration
>>: Comparison of the use of form element attributes readonly and disabled
Recommend
The difference and usage of Ctrl+z, Ctrl+c and Ctrl+d in Linux commands
What does Ctrl+c, Ctrl+d, Ctrl+z mean in Linux? C...
Introduction and analysis of three Binlog formats in MySQL
one. Mysql Binlog format introduction Mysql binlo...
Detailed explanation of JS variable storage deep copy and shallow copy
Table of contents Variable type and storage space...
Detailed Example of CSS3 box-shadow Property
CSS3 -- Adding shadows (using box shadows) CSS3 -...
MySQL implements string concatenation, interception, replacement, and position search operations
MySQL string concatenation, interception, replace...
CentOS IP connection network implementation process diagram
1. Log in to the system and enter the directory: ...
mysql5.6.zip format compressed version installation graphic tutorial
Preface: MySQL is a relational database managemen...
Detailed explanation of the Sidecar mode in Docker Compose
Table of contents What is Docker Compose Requirem...
About the pitfalls of implementing specified encoding in MySQL
Written in front Environment: MySQL 5.7+, MySQL d...
Solve the problem when setting the date to 0000-00-00 00:00:00 in MySQL 8.0.13
I just started learning database operations. Toda...
Generate OpenSSL certificates in Linux environment
1. Environment: CentOS7, Openssl1.1.1k. 2. Concep...
Detailed explanation of how to gracefully delete a large table in MySQL
Preface To delete a table, the command that comes...
How to use Linux whatis command
01. Command Overview The whatis command searches ...
The three new indexes added in MySQL 8 are hidden, descending, and functions
Table of contents Hidden, descending, and functio...
How to use Javascript to generate smooth curves
Table of contents Preface Introduction to Bezier ...