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
Common symbols in Unicode
Unicode is a character encoding scheme developed ...
Simply master the use of horizontal line annotations and code comments in HTML
Horizontal Line Use the <hr /> tag to draw ...
MySQL 8.0.21 installation tutorial under Windows system (illustration and text)
Installation suggestion : Try not to use .exe for...
Apache Bench stress testing tool implementation principle and usage analysis
1: Throughput (Requests per second) A quantitativ...
Summary of the switching problem and solution of installing multiple JDK versions in win10 64-bit system
Since myeclipse2017 and idea2017 are installed on...
Hbase installation and configuration tutorial under Linux
Table of contents Hbase installation and configur...
How to quickly use mysqlreplicate to build MySQL master-slave
Introduction The mysql-utilities toolset is a col...
Detailed tutorial on uploading and configuring jdk and tomcat on linux
Preparation 1. Start the virtual machine 2. git t...
The correct way to use MySQL indexes and detailed explanation of index principles
1. Introduction Why do we need indexes? In genera...
Detailed explanation of the underlying implementation of descending index, a new feature of MySQL 8
What is a descending index? You may be familiar w...
Select web page drop-down list and div layer covering problem
Questions about select elements in HTML have been...
How to analyze MySQL query performance
Table of contents Slow query basics: optimizing d...
How to use firewall iptables strategy to forward ports on Linux servers
Forwarding between two different servers Enable p...
js array fill() filling method
Table of contents 1. fill() syntax 2. Use of fill...
How is MySQL transaction isolation achieved?
Table of contents Concurrent scenarios Write-Writ...