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
MySQL database introduction: detailed explanation of database backup operation
Table of contents 1. Single database backup 2. Co...
Solve the problem of Docker starting Elasticsearch7.x and reporting an error
Using the Docker run command docker run -d -p 920...
How to optimize logic judgment code in JavaScript
Preface The logical judgment statements we use in...
mysql 5.7.19 latest binary installation
First download the zip archive version from the o...
Analyzing the node event loop and message queue
Table of contents What is async? Why do we need a...
A brief discussion on several specifications of JS front-end modularization
Table of contents Preface The value of front-end ...
Vue implements multi-tab component
To see the effect directly, a right-click menu ha...
Detailed tutorial on integrating Apache Tomcat with IDEA editor
1. Download the tomcat compressed package from th...
React Hooks Detailed Explanation
Table of contents What are hooks? Class Component...
Simple usage example of MySQL 8.0 recursive query
Preface This article uses the new features of MyS...
How to change $ to # in Linux
In this system, the # sign represents the root us...
Problems and solutions for installing Docker on Alibaba Cloud
question When installing Docker using Alibaba Clo...
Analysis of the principle of Nginx+Tomcat to achieve load balancing and dynamic and static separation
1. Implementation principle of Nginx load balanci...
Implementation of MySQL asc and desc data sorting
Data sorting asc, desc 1. Single field sorting or...
A brief discussion on Vue3 father-son value transfer
Table of contents From father to son: 1. In the s...