Examples of CSS implementation of various column layouts on the page

This article mainly introduces examples of methods for implementing one-column layout, two-column layout and three-column layout using CSS, including examples of adaptive width and height. Friends in need can refer to the following:

1. One-column layout (also called single-column layout)
One-column layout requires mastering 3 knowledge points: standard document flow, which includes block-level elements and row-level elements, as well as margin attributes. It can be said that The key code to implement a column layout is implemented by the margin attribute. Horizontal centering is achieved by setting margin: 0 auto;. Auto means that it will automatically set the margins on both sides according to the width of the browser. To set margin, you first have to have a box model, such as the div here, and then set its length and width to a fixed size to achieve centering.

<style type="text/css">
    body{margin:0;padding:0;}
    .head{heigth:200px;background:blue;}
    .main{height:500px;width:800p;margin:0 auto;}
    .footer{background:blue;height:200px;width:800px;margin:0 auto;}
</style>
<div class="head"> This is head !</div>
<div class="main"> This is main !</div>
<div class="footer"> This is footer !</div>

2. Two-column layout (two-column adaptive)
Floating:
Block-level elements are arranged row by row, and two block-level elements need to be When side by side, you need to use the floating layout float in CSS. Float has three attribute values,
left-left floating, right-right floating, none-not floating. Once the float attribute is set, the element will move accordingly. Move left or right until you touch the edge of the container.
When the element has no content but the floating attribute is set, the width of the element changes as the content changes.
The common method of clearing floats is: clear: both; (set for elements that need to be cleared). If you clearly know what kind of float is set, you can also clear: right/left. Generally, both is used to ensure that the float is Clear; there is another way to clear floats, width:100%;overflow:hidden;

<style type="text/css">
    body{margin:0;padding:0;}
    .main{width:800px;margin:0 auto;}
    .left{width:20%;height:500px;background:blue;float:left;}
    .right{width:80%;background:red;height:500px;float:right;}
</style>
<div class="main">
    <div class="left"> This is left !</div>
    <div class="right"> This is right !</div>
</div>

After adding the parent div, the right and left blocks are restricted to the parent block, and the parent The width of the block is fixed, so the width of the left and right blocks is also fixed. However, if the width of the parent block changes, the left and right blocks will also change accordingly, and the ratio is still 2:8, which is fixed.

3. Three-column layout
position can set 4 attribute values, namely: static (static positioning), relative (relative positioning), absolute (absolute positioning), fixed (Fixed positioning)
For three-column layout adaptation, just change the proportion in the above two-column layout to 33.33%. Then by analogy, the four-column layout adaptation can also use the same method to adjust the proportion distribution, thus Achieve the layout you want.

<style type="text/css">
    body{margin:0;padding:0;}
    .main{width:800px;margin:0 auto;}
    .left{width:33.33%;height:500px;background:blue;float:left;}
    .middle{width:33.33%;height:500px;background:black;float:left;}
    .right{width:33.33%;background:red;height:500px;float:right;}
</style>
<div class="main">
    <div class="left"> This is left !</div>
    <div class="middle"> This is middle !</div>
    <div class="right"> This is right !</div>
</div>

Another situation is that the widths of the left and right blocks are fixed at 200px and 300px respectively, while the middle is adaptive. In this case, it cannot be achieved through float. At this time, we need to absolutely position the left and right blocks, and then set the margin of the middle block to achieve the requirements. If you want the middle and left and right pieces not to fit closely together, you can increase the pixels appropriately when setting the margin (top, right, bottom, left). The implementation method is as follows:
Note that left:0;top:0;right:0;top:0; These settings are necessary. If not added, problems will occur. Personal test

<style type="text/css">
    body{margin:0;padding:0;}
    .main{width:800px;margin:0 auto;}
    .left{width:200px;height:500px;background:blue;position:absolute;left:0;top:0;}
    .middle{height:500px;background:black;margin:0 300px 0 200px;}
    .right{width:300px;background:red;height:500px;position:absolute;right:0;top:0;}
</style>
<div class="main">
    <div class="left"> This is left !</div>
    <div class="middle"> This is middle !</div>
    <div class="right"> This is right !</div>
</div>

In web design , we mostly mix the above layout methods, such as inserting a two-column or three-column layout into the main block of a one-column layout. The code is basically the same as above

Using the principle of BFC to implement
One of the rules of BFC is that the BFC area will not overlap with the float box, so we can use this to implement a 3-column layout.

css code is as follows

.left {   
  float: left;   
  margin-right: 10px;   
  width: 100px;   
  height: 100px;   
  background-color: orange;   
}   
.rightright {   
  float: rightright;   
  margin-left: 10px;   
  width: 100px;   
  height: 100px;   
  background-color: orange;   
}   
.main {   
  height: 100px;   
  background-color: green;   
  overflow: hidden;   
}

html code is as follows

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

Double flying wing layout
This layout scheme was first proposed by Taobao, mainly for the main purpose Columns can be loaded first.
Implementation principle:
(1) Add a wrap outside the main column, wrap the main column, and float the two sub-columns to the left.
(2) Set the wrap width of the main column to 100%, and set the margin-left of the sub-column to a negative value so that the sub-columns can be arranged on the left and right sides.
(3) This is because the margin-left and margin-right of the main column are a little larger than the width of the left and right columns. You can set the gap between the main column and the sub-column.

css code is as follows

.wrap {   
  width: 100%;   
}   
.wrap::after {   
  display: block;   
  content: '';   
  font-size: 0;   
  height: 0;   
  clear: both;   
  zoom: 1;   
}   
.main-content {   
  float: left;   
  width: 100%;   
}   
.main {   
  height: 100px;   
  background-color: green;   
  margin-left: 110px;   
  margin-right: 110px;   
}   
.left {   
  float: left;   
  width: 100px;   
  height: 100px;   
  background-color: orange;   
  margin-left: -100%;   
}   
.rightright {   
  float: left;   
  width: 100px;   
  height: 100px;   
  background-color: orange;   
  margin-left: -100px;   
}

html code is as follows

<div class="wrap">  
  <div class="main-content">  
    <div class="main"></div>  
  </div>  
  <div class="left"></div>  
  <div class="right"></div>  
</div>

Holy Grail Layout
Holy Grail layout should be simpler in structure, and it can also make the main Column first loading.
Implementation principle:
(1) Add a wrapping box, set the padding-leftpadding-right value, and make it a gap width larger than the sub-column width.
(2) The main column and sub-column are set to float: left, the margin-left of the left sub-column is set to -100%, and set to position: relative; left: -110px to place the left sub-column to the left. The same goes for the right column.
(3) The main column only needs to set the width to 100%. Do not set the width of the parcel box to 100%, just adapt it.

css code is as follows

.wrapper {   
  padding-left: 110px;   
  padding-right: 110px;   
  overflow: hidden;   
}   
.main {   
  float: left;   
  width: 100%;   
  height: 100px;   
  background-color: #ccc;   
}   
.left {   
  float: left;   
  width: 100px;   
  height: 100px;   
  margin-left: -100%;   
  position: relative;   
  left: -110px;   
  _left: 0;   
  background-color: orange;   
}   
.rightright {   
  float: left;   
  width: 100px;   
  height: 100px;   
  background-color: orange;   
  margin-left: -100px;   
  position: relative;   
  rightright: -110px;   
}

html code is as follows

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