CSS example of using table to implement five common layouts _css tutorial _css_ Web Authoring

This article mainly introduces the CSS using table to achieve five common layout of the method example of the relevant information, small series feel very good, now share to everyone, there is CSS source, oh, also for everyone to do a reference. The little friends who are interested in CSS come along and look at it.

This article describes the CSS using table to implement five common layout methods examples, share to everyone, specifically as follows:

Layout one:

Effect:

Code:

Html:

<p class= "header" >header</p><p class= "main" >main</p><p class= "Footer" >footer</p >

Note: P must have content, otherwise it will not show

Css:

body{  margin:0;  padding:0;  width:100%;  MIN-HEIGHT:100VH;  display:table;  Text-align:center;}. header,.main,.footer{  Display:table-row;}. header{  height:50px;  Background:tomato;}. main{  Background:skyblue;}. footer{  height:50px;  Background: #9d70ff;}

Layout two:

Effect:

Code:

Html:

<p class= "header" >header</p><p class= "main" >  <p class= "left" >left</p>  <p Class= "right" >right</p></p><p class= "Footer" >footer</p>

Css:

body{  margin:0;  padding:0;  width:100%;  MIN-HEIGHT:100VH;  display:table;  Text-align:center;}. header,.main,.footer{  Display:table-row;}. header{  height:50px;  Background:tomato;}. main{  width:100%;  display:table;  Height:calc (100vh-100px);}. Main. left{  width:300px;  Display:table-cell;  Background: #fcea96;}. Main. right{  Display:table-cell;  Background:skyblue;}. footer{  height:50px;  Background: #9d70ff;}

Note: 100px in the Height property of main is the sum of the header and footer heights

Layout three:

Effect:

Code:

Html:

<p class= "left" >left</p><p class= "right" >  <p class= "header" >header</p>  <p class= "main" >main</p>  <p class= "Footer" >footer</p></p>

Css:

body{  margin:0;  padding:0;  MIN-HEIGHT:100VH;  display:table;  Text-align:center;}. left{  Display:table-cell;  width:200px;  Background:tomato;}. right{  display:table;  Width:calc (100vw-200px);  HEIGHT:100VH;}. header,.main,.footer{  Display:table-row;}. header{  height:50px;  Background:skyblue;}. main{  background: #fcea96;}. footer{  height:50px;  Background: #9d70ff;}

Layout four (double column layout, example for left fixed, right adaptive):

Effect:

Code:

Html:

<p class= "left" >left</p><p class= "right" >right</p>

Css:

body{  margin:0;  padding:0;  width:100%;  HEIGHT:100VH;  display:table;  Text-align:center;}. left,.right{  Display:table-cell;}. left{  width:300px;  Background:tomato;}. right{  Background:skyblue;}

Layout Five (three-column layout, example for left fixed, right fixed, intermediate adaptive):

Effect:

Code:

Html:

<p class= "left" >left</p><p class= "Middle" >middle</p><p class= "right" >right</p >

Css:

body{  margin:0;  padding:0;  width:100%;  HEIGHT:100VH;  display:table;  Text-align:center;}. left,.middle,.right{  Display:table-cell;}. left{  width:300px;  Background:tomato;}. middle{  background: #ffe69e;}. right{  width:200px;  Background:skyblue;}