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
JavaScript implements select all and unselect all operations
This article shares the specific code for JavaScr...
Solution to installing vim in docker container
Table of contents The beginning of the story Inst...
Detailed explanation of some settings for Table adaptation and overflow
1. Two properties of table reset: ①border-collaps...
JavaScript to achieve text expansion and collapse effect
The implementation of expanding and collapsing li...
Analysis and treatment of scroll bars in both HTML and embedded Flash
We often encounter this situation when doing devel...
Detailed explanation of system input and output management in Linux
Management of input and output in the system 1. U...
Detailed explanation of how to use grep to obtain MySQL error log information
To facilitate the maintenance of MySQL, a script ...
About VSCode formatting JS automatically adding or removing semicolons
introduction It is okay to add or not add a semic...
Vue Beginner's Guide: Environment Building and Getting Started
Table of contents Initial Vue Building a Vue deve...
Customization Method of Linux Peripheral File System
Preface Generally speaking, when we talk about Li...
Detailed explanation of the principles and usage of MySQL master-slave replication and read-write separation
This article uses examples to illustrate the prin...
Detailed explanation of the steps for configuring the Centos7 bridge network under VMware
The complete steps of Centos7 bridge network conf...
How to install lua-nginx-module module in Nginx
ngx_lua_module is an nginx http module that embed...
Docker configures the storage location of local images and containers
Use the find command to find files larger than a ...
Tutorial on installing MYSQL5.7 from OEL7.6 source code
First, download the installation package from the...