Three common page layouts in CSS: double-wing layout, glue layout, and left and right column layout

This article will introduce to you three common CSS page layouts: double flying wing layout, adhesion layout, and left and right column layout. I hope it will be of some help to you.

(Recommended tutorial:CSS video tutorial)

1. Left and right column layout

1. The code is as follows

       
  
 
left
 
 lzprightrightrightrightrightrightrightrightrightrightrightrightrightright 
 rightrightrightrightrightrightrightrightrightrightrightrightrightright 
 rightrightrightrightrightrightrightrightrightrightrightrightrightright 
 rightrightrightrightrightrightrightrightrightrightrightrightrightright 
 
 
  

The effect is as follows:

2. Necessary instructions

The outer container con if For a fixed width, the overflow: hidden; of the right element is necessary, otherwise the font in the rig will not be in the rig.

If the con width of the outer container is 100%, or the default, the overflow: hidden; of the right element is optional, and the page will not be affected.

2. Adhesion layout

1. The code is as follows:

        
  
 
 main
main
main
main
 main
main
main
main
 main
main
main
main
 main
main
main
main
 main
main
main
main
 main
main
main
main
 main
main
main
main
 main
main
main
main
 main
main
main
main
 main
main
main
main
 main
main
main
main
 mlzpain
 
 
  
 footer 
  

3. Double flying wings The layout

      
  
 
 
 
middle
 
middle
 
middle
 
 
 
left
 
right
 
  

has the following effect:

For more programming-related knowledge, please visit:Programming Teaching! !

The above is the detailed content of Three common page layouts in CSS: double-wing layout, glue layout, and left and right column layout. For more information, please follow other related articles on the PHP Chinese website!