Detailed explanation of CSS three-column layout code
Written in the front : The blogger recently turned around to review the CSS learned earlier, and sorted out the notes of the CSS three-column layout, just to smooth out his own logical thinking. For analysis, I tried to write it in detail according to the idea, and the code can run correctly. I leave it to the friends who need it for reference. If there are any deficiencies, please add them in the comment area.
The key to the three-column layout: Do not set the width of the container box and the main box, otherwise the browser cannot adapt itself when the viewport is reduced, which violates the purpose of the three-column layout.
Table of contents
Method 1: floating + margin
Code idea : Place three boxes in a container container, (for the convenience of distinguishing and adding styles, add the class names left, right, and main respectively), and the order of the boxes from top to bottom is left, right, and main*. Add left and right floats to the left and right boxes, making them float to the left and right edges of the browser window. At this time, the left and right boxes will break away from the standard flow, and the main box will occupy their original positions. Add margin-left and margin-right to the main box, and set their values to the width of left and right respectively. At this time, the content area of the main box will be displayed in the middle of the left and right boxes. The three-column layout is complete.
- The reason for placing the left and right boxes in front of the main box : Adding a floating element will break away from the standard flow and lose its original position, and the element below the added floating element will occupy its original position. But adding a floated element doesn't affect the standard flow of the element before it. Therefore, if the main is written in front, the left and right cannot be pressed on the main box after adding floats.
- The main box does not set the width, and sets the width of the container parent box to 100%, then the main box defaults to the width of the parent box container.
The code of method 1 is as follows (tested and can be run directly):
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<style>
.container{
width: 100%;
height: 200px;
/* background-color: pink; */
}
.left{
float: left;
width: 200px;
height: 200px;
background-color: red;
}
.right{
float: right;
width: 200px;
height: 200px;
background-color: blue;
}
.main{
height: 200px;
background-color: aqua;
margin-left: 210px;
margin-right: 210px;
}
</style>
</head>
<body>
<div class="container">
<div class="left"></div>
<div class="right"></div>
<div class="main"></div>
</div>
</body>
</html>
Method 2: Float + BFC
Code idea : Similar to method 1, only the margin is different. After the left and right boxes are floated and pressed on the main box, BFC (Block Formatting Context | Block Formatting Context ) is used for the main box to achieve the effect that the width of the main box is exactly in the middle of the left and right boxes without being pressed. The three-column layout is complete.
BFC ( Block Formatting Context | block-level format context ): BFC is an independent rendering area of a web page, and the rendering of internal elements will not affect elements outside the boundary.
Elements after BFC is enabled have the following characteristics:
- Elements will not be covered by floated elements;
- Margins of child and parent elements do not overlap;
- Parent elements can contain floated child elements.
Here we can use the first feature to enable the BFC of the main element to achieve the effect of a three-column layout.
The most common way to enable BFC is to add it to the element's style
overflow:hidden.Therefore, the difference between method 2 and method 1 is that the processing method of main is changed from adding margin to enabling BFC.
The code of method 2 is as follows (tested and can be run directly):
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<style>
.container{
width: 100%;
height: 200px;
/* background-color: pink; */
}
.left{
float: left;
width: 200px;
height: 200px;
background-color: red;
}
.right{
float: right;
width: 200px;
height: 200px;
background-color: blue;
}
.main{
/* 开启主元素的BFC */
overflow: hidden;
height: 200px;
}
</style>
</head>
<body>
<div class="container">
<div class="left"></div>
<div class="right"></div>
<div class="main"></div>
</div>
</body>
</html>
Method 3: flex layout (the most convenient)
Code idea : Use the flex elastic box layout to set the parent element box of the three boxes as a flex layout. At this time, use the elastic layout to place the main box between the left and right boxes, set the width of the left and right boxes, and then add it to the style of the mail box flex：1to achieve a three-column layout.
flex layout : flex box layout
flex: 1 : The flex attribute indicates that the element allocates the remaining space of the parent box with the elastic layout set, that is, in this case, the remaining space after the left and right widths are removed from the container box for the main allocation; : The attribute value is a number, and the number indicates how many shares are occupied
flex：<number>.
The code of method 3 is as follows (tested and can be run directly):
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<style>
.container{
display: flex;
width: 100%;
height: 200px;
}
.left{
width: 200px;
height: 200px;
background-color: red;
}
.right{
width: 200px;
height: 200px;
background-color: blue;
}
.main{
flex: 1;
height: 200px;
background-color: aqua;
}
</style>
</head>
<body>
<div class="container">
<div class="left"></div>
<!-- 注意main在中间 -->
<div class="main"></div>
<div class="right"></div>
</div>
</body>
</html>
Method 4: Table layout
Code idea : set the container container as a table display:table, arrange the left box, main box, and right box in sequence, set these three sub-boxes as cells, and display:table-cellset the width of the left and right boxes, then the main box in the middle will be set as a cell and will automatically occupy the middle width. The three-column layout is complete.
The code of method 4 is as follows (tested and can be run directly):
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>table布局</title>
<style>
.container{
display: table;
width: 100%;
height: 200px;
}
.left{
display: table-cell;
width: 200px;
height: 200px;
background-color: red;
}
.right{
display: table-cell;
width: 200px;
height: 200px;
background-color: blue;
}
.main{
display: table-cell;
height: 200px;
background-color: aqua;
}
</style>
</head>
<body>
<div class="container">
<div class="left"></div>
<div class="main"></div>
<div class="right"></div>
</div>
</body>
</html>
Method 5: positioning + margin
Code ideas:
- The initial document flow should place the left and right boxes in front of the main box (there are pits, which will be explained later)
- Both container and main are not set wide, and the left and right margins are added to main to vacate the left and right positions;
left:0The child looks like the father, the container is added with relative positioning, the left and right boxes are set with absolute positioning, and the side offsets are added toright:0the sum- The three-column layout is complete
Absolute positioning: Offset relative to the nearest level of positioned ancestor element.
The code of method five is as follows (tested and can be run directly):
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>table布局</title>
<style>
.container{
position: relative;
width: 100%;
height: 200px;
}
.left{
position: absolute;
/* 表示离container盒子的左边线的偏移量为0 */
left: 0;
/* 基础宽高颜色 */
width: 200px;
height: 200px;
background-color: red;
}
.right{
position: absolute;
/* 表示离container盒子的右边线的偏移量为0 */
right: 0;
/* 基础宽高颜色 */
width: 200px;
height: 200px;
background-color: blue;
}
.main{
height: 200px;
background-color: aqua;
margin-left: 200px;
margin-right: 200px;
}
</style>
</head>
<body>
<div class="container">
<div class="left"></div>
<div class="right"></div>
<div class="main"></div>
</div>
</body>
</html>
Note: The initial document flow should place the left and right boxes in front of the main box, otherwise the following situation will occur
(Here, main is placed in front of left and right). The reason is that the main box does not need to add absolute positioning, so it does not break away from the document flow and occupies an exclusive line. According to the above code, the left and right boxes cannot be in the same line.
If you want to place the main box in front of the left and right boxes, you can also achieve the effect: just add the side offsets of the absolute positioning of the left and right boxes, which
top:0means that the distance between the left and right boxes and the upper edge of the parent box container with relative positioning is 0.At this time, the source code is as follows:
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>table布局</title> <style> .container{ position: relative; width: 100%; /* height: 200px; */ } .left{ position: absolute; /* 表示离container盒子的左边线的偏移量为0 */ left: 0; top: 0; /* 基础宽高颜色 */ width: 200px; height: 200px; background-color: red; } .right{ position: absolute; /* 表示离container盒子的右边线的偏移量为0 */ right: 0; top: 0; /* 基础宽高颜色 */ width: 200px; height: 200px; background-color: blue; } .main{ height: 200px; background-color: aqua; margin-left: 200px; margin-right: 200px; } </style> </head> <body> <div class="container"> <div class="main"></div> <div class="left"></div> <div class="right"></div> </div> </body> </html>
Method 6: Holy Grail Layout
Code ideas:
-
Use the container to wrap the three boxes. The Holy Grail layout takes the main box as the main body, and the initial standard flow direction is: main box, left box, and right box.
-
Add a margin value of 200px (the width of the left and right boxes) to the container container to leave the left and right spaces free.
-
Set the width of the main box to 100%, then the width of main is 100% of the width of the parent box.
-
At the same time, add left floating to the main, left, and right boxes
float:left. At this time, the three boxes float to the left and become the state as shown in the figure below:
-
Then first set the left box
margin-left:-100%, and move the left box to the left (the width of the parent box) by 100%, reaching:
-
Then set the right box in the same way
margin-left:-200px, and arrive at: (at this time, the left and right boxes cover part of the main)
-
Use Relative Layout to move the position of the left and right boxes to reach the sides.
.left{ ... ... position:relative; /*离原来位置的左边线-200px*/ left:-200px; ... ... } .right{ ... ... position:relative; /*离原来位置的左边线200px*/ left:200px; ... ... } -
The three-column layout is complete.
Summarize:
- margin to the parent box empty left and right
- The main is placed in the front to account for 100%, and the floating three boxes are arranged in a row
- The negative value of margin moves the box to the sides of main
- Relative positioning moves to white space
The code of method 6 is as follows (tested and can be run directly):
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>table布局</title>
<style>
.container{
margin-left: 200px;
margin-right: 200px;
}
.main{
float: left;
/* 基础宽高颜色 */
width: 100%;
height: 200px;
background-color: green;
}
.left{
/* 利用浮动将左右盒子 */
float: left;
margin-left: -100%;
/* 左盒子相对定位*/
position: relative;
left: -200px;
/* 基础宽高颜色 */
width: 200px;
height: 200px;
background-color: red;
}
.right{
float: left;
margin-left: -200px;
/* 右盒子相对定位 */
position: relative;
left: 200px;
/* 基础宽高颜色 */
width: 200px;
height: 200px;
background-color: blue;
}
</style>
</head>
<body>
<div class="container">
<div class="main"></div>
<div class="left"></div>
<div class="right"></div>
</div>
</body>
</html>
Note: Here the right box can also
margin-right:-200pxbe directly moved to the target position without positioning.And do not set the width of the container, otherwise the browser viewport will shrink and the middle box will not be adaptive.
Method Seven: Double Flying Wing Layout
Code ideas:
-
The difference from the Holy Grail layout is that the double-flying wing layout has no container parent box
-
The same part as the Holy Grail layout is the part in front of the relative layout. At this time, the width of the main box is 100% of the browser width, and the left and right boxes cover both ends of the main box.
Here you cannot directly add left and right margins to the main, because it will disrupt the position of the front left and right boxes moving through the margins.
3. Wrap the main box with an outer box, add float and width 100% to outer, then you can add left and right margins to main. The three-column layout is complete.
The code of mode 7 is as follows (tested and can be run directly):
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>双飞翼布局</title>
<style>
.outer{
float: left;
width: 100%;
}
.main{
margin: 0 200px;
/* 基础宽高颜色 */
height: 200px;
background-color: green;
}
.left{
/* 利用浮动将左右盒子 */
float: left;
margin-left: -100%;
/* 基础宽高颜色 */
width: 200px;
height: 200px;
background-color: red;
}
.right{
float: left;
margin-left: -200px;
/* 基础宽高颜色 */
width: 200px;
height: 200px;
background-color: blue;
}
</style>
</head>
<body>
<div class="outer">
<div class="main"> 12472937593842759734096739084718237895273845821739847218374819290837239847839275402
</div>
</div>
<div class="left"></div>
<div class="right"></div>
</body>
</html>
Summarize
These are the seven common CSS implementations of the three-column layout. If there are deficiencies, you can point them out in the comment area.