The following is an introduction to the three column layout ： Common three column layouts are , Fluid layout , Grail layout , Dual wing layout ,flex layout , Absolute positioning layout , Grid layout
Fluid layout
The width on both sides is fixed , The middle width can be changed according to the size of the screen . The key points of implementation are , The elements on the left and right respectively set the float for them , That is, the left side is set as left floating , Right is right float , And set to a fixed width and height ; Main modules in the middle , use margin-left also margin-right Make settings （ The value set is the distance to both sides of the parent element , This means to container The distance of the parent element margin ）
.left { float: left; width: 100px; height: 200px; background: red; } .right {
float: right; width: 200px; height: 200px; background: blue; } .main {
margin-left: 120px; margin-right: 220px; height: 200px; background: green; }
<div class="container"> <div class="left"></div> <div class="right"></div> <div
class="main"></div> </div>
Grail layout
It's very similar to the double wing layout , There are some differences in details , Relative to the twin wing configuration ,HTML Relatively simple structure , But the style definition is a little more complicated , It is also the priority to load the content body
Effect achieved ： The width of both sides is fixed , middle Main The width of will vary with the width of the screen
Implementation steps
*
hold left Put it on , Due to floating , to left set up margin-left: -100% To make the left column float to center above , And located in center
Above left .
*
Also right set up margin-left: -200px, The length here is equal to right Length of
*
At this time center Both sides of left and right Covered , So give container set up padding: 0 200px
*
because left and right At the same time, it shrinks to the middle , So give left and right Set separately left: -200px; right:
-200px, Offset its own width on both sides to cover it contaniner use padding Blank position after .
.container { /* Set to bfc Standard for */ overflow: hidden; padding: 0 200px; } .container
> div { position: relative; /* to div Set to float , So its child elements are floating */ float: left; height:
100px; } .main { width: 100%; background-color: red; } .left { width: 200px;
background-color: green; /* Means that the padding All widths outside the area */ margin-left: -100%;
/* Because it was previously set padding, All left The element shrinks to the middle , So set a left Negative value of */ left: -200px; } .right { width
: 200px; background-color: blue; /* If not set -200 This is worth talking about , Will run down the line . Because a padding
200px Value of , So set -200 go back , And its properties are float：left*/ margin-left: -200px; /*
It means that the rightmost part of the element is relative to the division of the parent element padding Area of , What is the distance px（ positive ）, Over that one padding What is the limit of px*/ right: -200px
; } <div class="container"> <div class="main"></div> <div class="left"></div>
<div class="right"></div> </div>
distinguish margin-left And left
one , In case of positioning statement ： Namely position:absolute,relative,fixed In these cases
1> only margin-left： this look position 's statement has no effect , Because even if it is declared , It depends left,top To adjust the position , without left etc. , be position invalid , Element position is still where it should be ,margin-left Or the distance from its parent element
2> only left etc. ： Normal condition
3> At the same time margin-left and left： In this case , Positioning works , After positioning margin-left Reactivation , Namely margin-left and left Can be superimposed
two , No positioning statement or position:static In case of
left Invalid definition of, etc ,margin-left Valid
Dual wing layout
Using floating elements margin Application of negative values . The main content can be loaded first ,HTML The code structure is a little more complicated .
Implementation steps
* hold left Put it on , Due to floating , to left set up margin-left: -100% To make the left column float to center above , And located in
center Above left .
* Also right set up margin-left: -200px, The length here is equal to right Length of
* to main set up margin: 0 200px, Simultaneous setting overflow: hidden Make it a BFC .container { overflow
: hidden; } .container > div { position: relative; float: left; height: 100px; }
.center { width: 100%; background-color: red; } .left { width: 200px;
background-color: green; margin-left: -100%; } .right { width: 200px;
background-color: blue; margin-left: -200px; } .main { height: 100%; margin: 0
200px; background-color: rosybrown; overflow: hidden; } <div class="container">
<!-- Render first --> <div class="center"> <div class="main"> center </div> </div> <div
class="left"> left </div> <div class="right"> right </div> </div>
flex layout
Implementation steps
* to container Set as one flex container display: flex
* center The width of is set to width: 100%,left and right Set to width: 200px
* In order not to left and right shrink , Set them flex-shrink: 0
* use order Attribute to the three part DOM Structure to sort ：left：order: 1,center：order: 2,right：order: 3
.container { display: flex; } .center { background-color: red; width: 100%;
order: 2; } .left { background-color: green; width: 200px; flex-shrink: 0; order
: 1; } .right { background-color: blue; width: 200px; flex-shrink: 0; order: 3;
} <body> <div class="container"> <!-- Render first --> <div class="center"> center
</div> <div class="left"> left </div> <div class="right"> right </div> </div>
</body>
Extremely flexible
Absolute positioning layout
Implementation steps
* to container set up position: relative and overflow:
hidden, Because the reference of the absolutely positioned element is the first postion Not static Ancestor element of .
* left Float left ,right Float right .
* center Use absolute positioning , By setting left and right And keep both sides apart .
* center set up top: 0 and bottom: 0 Keep it high open .center { position: absolute; left: 200px;
right: 200px; top: 0; bottom: 0; } <body> <div class="container"> <!-- Render first -->
<div class="center"> center </div> <div class="left"> left </div> <div class=
"right"> right </div> </div> </body>
The disadvantage is that it depends on left and right Height of , If the height of both columns is not enough , The height of the middle content area will also be compressed .
Grid layout
Implementation steps
* to container Set to display: grid
* Set the height of the three columns ：grid-template-rows: 100px
* Set the width of the three columns , Intermediate adaptation , Fixed on both sides ：grid-template-columns: 200px auto 200px; .container {
display: grid; width: 100%; grid-template-rows: 100px; grid-template-columns:
200px auto 200px; } <body> <div class="container"> <div class="left"> left
</div> <!-- At this time center Put it in the middle --> <div class="center"> center </div> <div class=
"right"> right </div> </div> </body>
Extremely convenient to use
Technology