HTML\CSS---Double wing layout

Summarize the two-wing layout, the more classic layout of the written interview may be the examination.

Put the HTML on first.

<! DOCTYPE html>                main            </div>        </div>        <div id=" left ">left</div>        <div id= "Right" >right</div>    </div></body>

The idea of double flying Wings is as follows:

1, the width of main is set to 100%, fill the overall;

2, set the left width of 30%, leave to cover main 30%;

3. Set the width of right to 20%, so that it is 20% to the right;

4. Let the left and right margin of mainin be 30%, 20% respectively;

5, double flying wings success, the last show is left, Mainin, right three parts;

From its thinking can be seen to achieve the main points of the two wings have two, one is how to let left and right cover main, and the second is to let mainin empty left and right margin;

So I'm going to put out the CSS code, and everybody looks pretty clear.

#left, #main, #right {    height:200px;    Float:left;} #main {    background-color:blue;    width:100%;} #left {    background-color:orange;    width:30%;    Margin-left:-100%;} #right {    background-color:red;    width:20%;    Margin-left:-20%;} #mainIN {    margin:0 20% 0 30%;}

Simple and clear, again the main point:

1, the use of float:left let three float, so that three pieces have side-by-side possibilities;

2, the use of margin-left:-x%; let left and right move to the previous line and main walk;

3, margin:0 20% 0 30%; let Mainin empty the left and right part of main;

4. The last three parts shown are left, mainin, right;

Just remember the idea and the code doesn't matter.

HTML\CSS---Double wing layout