Several methods of implementing two fixed columns and one adaptive column in CSS
|
This article introduces several methods of implementing two fixed columns and one adaptive column in CSS, and shares them with you. The details are as follows: 1.Flex layout The Flexible Box Model, commonly referred to as flexbox, is a one-dimensional layout model. It provides powerful space distribution and alignment capabilities between flexbox child elements. We say that flexbox is a one-dimensional layout because a flexbox can only handle the layout of elements in one dimension at a time, a row or a column. Here we use flex layout to achieve two fixed columns and one adaptive column
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
#main{
display: flex;/*Set as a flexible container*/
}
#left{
width:200px;/*Fixed width on the left*/
height:400px;
background:aqua;
}
#center{
flex-grow:1; /*Fill the remaining space*/
height:400px;
background:green;}
#right{
width:200px;/*Fixed right width*/
height:400px;
background:blue;
}
</style>
</head>
<body>
<div id="main">
<div id="left"></div>
<div id="center"></div>
<div id="right"></div>
</div>
</body>
</html>2. Use the floating method Use float:left and float:right for the left and right parts respectively. Float makes the left and right elements out of the document flow, while the middle element is normally in the normal document flow. Use margin to specify the left and right margins for positioning in the middle document flow.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
*{margin: 0;padding: 0;}
#main{
width: 100%;height: 400px;
}
#left{
width:200px;/*Fixed width on the left*/
height:400px;
float: left; /*Set the container to float left*/
background:aqua;
}
#center{
width: 100%;
height:400px;
margin: 0 200px;/*Set the left and right margins of the container*/
background:green;}
#right{
width:200px;/*Fixed right width*/
height:400px;
float: right;/*Set the container to float right*/
background:blue;
}
</style>
</head>
<body>
<div id="main">
<div id="left"></div>
<div id="right"></div>
<div id="center"></div>
</div>
</body>
</html>3. Use float plus calc function Use float:left for the three parts, then fix the width on the left and right sides, and use the calc function to calculate the width in the middle.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
*{margin: 0;padding: 0;}
#main{
width: 100%;height: 400px;
}
#left{
width:200px;/*Fixed width on the left*/
height:400px;
float: left; /*Set the container to float left*/
background:aqua;
}
#center{
width: calc(100% - 400px);/*Set the middle width to the parent container width minus 400px*/
height:400px;
float: left;/*Set the container to float left*/
background:green;}
#right{
width:200px;/*Fixed right width*/
height:400px;
float:left;/*Set the container to float left*/
background:blue;
}
</style>
</head>
<body>
<div id="main">
<div id="left"></div>
<div id="center"></div>
<div id="right"></div>
</div>
</body>
</html>4. Use absolute positioning Use absolute positioning to fix the left and right parts at both ends, and use margin to specify the left and right margins for positioning in the middle document flow.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
*{margin: 0;padding: 0;}
#main{
width: 100%;
height: 400px;
position: relative;/*Parent container uses relative positioning*/
}
#left{
width:200px;/*Fixed width on the left*/
height:400px;
position: absolute;/*Use fixed positioning on the left*/
left: 0;/*positioned at the far left of the container*/
top: 0;
background:aqua;
}
#center{
width:100%;
height:400px;
margin: 0 200px;/*Set the left and right margins of the middle container*/
background:green;}
#right{
width:200px;/*Fixed right width*/
height:400px;
position: absolute;/*Fixed positioning on the right*/
right: 0;/*positioned at the rightmost side of the container*/
top: 0;
background:blue;
}
</style>
</head>
<body>
<div id="main">
<div id="left"></div>
<div id="center"></div>
<div id="right"></div>
</div>
</body>
</html>The effect diagram is as follows:
This concludes this article about several methods of implementing two fixed columns and one adaptive column with CSS. For more relevant content about two fixed columns and one adaptive column 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! |
<<: Introduction to the use of form OnSubmit and input type=image
>>: Detailed explanation of JavaScript timers
Recommend
HTML table tag tutorial (25): vertical alignment attribute VALIGN
In the vertical direction, you can set the row al...
Implementing simple tabs with js
Tab selection cards are used very frequently on r...
What are the benefits of using // instead of http:// (adaptive https)
//Default protocol /The use of the default protoc...
Detailed explanation of the application of Docker Swarm in continuous integration testing
background The Agile model is widely used, and te...
Detailed tutorial on installing Hbase 2.3.5 on Vmware + Ubuntu18.04
Preface The previous article installed Hadoop, an...
Detailed explanation of table return and index coverage examples in MySQL
Table of contents Index Type Index structure Nonc...
In-depth explanation of Mysql deadlock viewing and deadlock removal
Preface I encountered a Mysql deadlock problem so...
MySQL learning: five major constraints of database tables explained in detail for beginners
Table of contents 1. Constraint concepts and clas...
Summary of the dockerfile-maven-plugin usage guide
Table of contents pom configuration Setting.xml c...
How to simulate enumeration with JS
Preface In current JavaScript, there is no concep...
Mysql slow query optimization method and optimization principle
1. For comparison of date size, the date format p...
CenterOS7 installation and configuration environment jdk1.8 tutorial
1. Uninstall the JDK that comes with centeros fir...
JavaScript type detection method example tutorial
Preface JavaScript is one of the widely used lang...
Mount the disk in a directory under Ubuntu 18.04
Introduction This article records how to mount a ...
Using cursor loop to read temporary table in Mysql stored procedure
cursor A cursor is a method used to view or proce...