A two-column layout

Left fixed width, right adaptive

1. Set absolute positioning on the right to delete it from the document stream

/ / on the left side of the width: 200 px; / / on the right side of the position: absolute; left:200px;Copy the code

2. Floating method

Not conducive to page optimization, the main content on the right side after loading

/ / on the left side of thefloat:left; width:200px; // No Settings are required on the rightCopy the code

3, margin negative method

Three column layout

Fixed width on both sides and browser adaptive layout in the middle

1. Use absolute positioning

<div class="container">
    <div class="main"></div>
    <div class="left"></div>
    <div class="right"></div>
</div>

.container {
    position: relative;
}
.main {
    margin: 0 120px;
}
.left {
    position: absolute;
    width: 120px;
    left: 0;
}
.right {
    position: absolute;
    width: 120px;
    right: 0;
}
Copy the code

2. Floating method

<div class="container">
    <div class="left"></div>
    <div class="right"></div>
    <div class="main"></div> Put ## main at the end
</div>

.left {
    float: left;
    width: 100px;
}
.right {
    width: 200px;
    float: right;
}
.main {
    margin-left: 120px;
    margin-right: 220px;
}
The BFC region does not overlap with the floating element
.main {
    overflow: hidden;
}
Copy the code

Disadvantages: The main content module cannot be loaded first. If there is too much content in the page, the user experience will be affected

3. Dual wing layout

It compares content to the body of a bird, and the left and right sides to two wings, so it is called double flying wings

Principle: Another div is nested in the content div, all of which float to the left. The margin of the content div is reserved for the left and right div, and the left and right div can only be realized by setting negative margin values. Position :relative is less and div is more than the Holy Grail layout.

<div class='content'>## main by enclosing a div layer
    <div class='main'>
    </div>
</div>
<div class='left'>
</div>
<div class='right'>
</div>

.content{
    float:left;
    width:100%;
}
.main{
    margin-left:200px;## Fixed width on the left
    margin-right:100px;## Fixed width on right side
}
.left{
    float:left;
    width:200px;
    margin-left:-100%;## Go back to the previous line
}
.right{
    float:left;
    width:100px;
    margin-left:-100px;# # the width of the right
}
Copy the code

Using the floating element margin negative value, the main content can be loaded first, the HTML code structure is slightly more complex.

Grail layout

The Holy Grail was once used to receive the blood of Jesus, so it is regarded as a holy object by Christians. The Holy Grail has been circulating for thousands of years, but it seems that it has not been found yet (Spain suspected to have found the Holy Grail, let’s not discuss it for the moment). After all, it has been circulating for thousands of years and it is difficult to find. Three-column layout In Web design, there are many solutions but each has its drawbacks, so the industry calls the perfect three-column layout the Holy grail.

Principle: Set the content, left and right to float to the left, the parent div margin to leave space for the left and right div; Then move to the desired position via margin-left and relative positioning on the left and right.

<div class="container">
	<div class="main"></div>
	<div class="left"></div>
	<div class="right"></div>
</div>
.container{## Reserve width for left and right sides
    margin-left:220px;
    margin-right:120px;
}
.main{
    width:100%;
    float:left;
}
.left{
    float:left;
    width:200px;
    margin-left:-100%;## Back to the previous line but next to main
    position:relative;
    left:-120px;
}
.right{
    float:left;
    width:100px;
    margin-left:-100px;
    position:relative;
    left:-120px;
}
Copy the code

5. Flex layout

 <div class="container">
	<div class="main"></div>
	<div class="left"></div>
	<div class="right"></div>
</div>
.container {
    display: flex;
}
.main {
    flex-grow: 1;
}
.left {
    order: -1;
    flex: 0 1 200px;
}
.right {
    flex: 0 1 100px;
}
Copy the code

reference

Juejin. Cn/post / 684490… Blog.csdn.net/wangjun5159…