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
iframe src assignment problem (server side)
I encountered this problem today. I reassigned the...
MySQL 5.7.17 installation graphic tutorial (windows)
I recently started learning database, and I feel ...
Linux system command notes
This article describes the linux system commands....
Use of Linux sed command
1. Function Introduction sed (Stream EDitor) is a...
Detailed explanation of how to install mysql5.7.16 from source code in centos7 environment
This article describes how to install mysql5.7.16...
Vue uses monaco to achieve code highlighting
Using the Vue language and element components, we...
MySQL data aggregation and grouping
We often need to summarize data without actually ...
HTML form and the use of form internal tags
Copy code The code is as follows: <html> &l...
Detailed explanation of CSS3+JS perfect implementation of magnifying glass mode
About a year ago, I wrote an article: Analysis of...
JavaScript data transmission between different pages (URL parameter acquisition)
On web pages, we often encounter this situation: ...
Native JavaScript to achieve skinning
The specific code for implementing skinning with ...
MySQL data insertion efficiency comparison
When inserting data, I found that I had never con...
What is web design
<br />Original article: http://www.alistapar...
JavaScript Regular Expressions Explained
Table of contents 1. Regular expression creation ...