How CSS's classic three-column layout is implemented

Source: Internet
Author: User
This time to bring you CSS classic three-column layout how to achieve, the implementation of the classic CSS three-column layout of the attention to what, the following is the actual case, together to see.

This article introduces the CSS classic three-column layout scheme, share to everyone, but also to make a note for themselves, as follows:

Three-column layout, as the name implies is fixed on both sides, the middle self-adaptation. Three-column layout is very common in development

1. Float layout

The simplest three-column layout is to use float for layout. First, draw the left and right columns:

<style>  . Left {    float:left;    width:100px;    height:200px;    background-color:red;  }   . Right {    float:right;    width:100px;    height:200px;    Background-color:yellow;  } </style>     <div class= "container" >    <div class= "left" ></div>    <div class= " Right "></div>    <div class=" main "></div>  </div>

Let's look at how the middle column is handled. We know that for the float element, it will be out of the flow of the document, and the other boxes will ignore this element. (But the text in the other boxes will still give the element a place to wrap around.) So just add a normal div inside the container container, which ignores left and right, and fills the entire container, just add margin to the left right to go out of space:

<style>   . Left {     float:left;     width:100px;     height:200px;     background-color:red;   }     . Right {     float:right;     width:100px;     height:200px;     Background-color:yellow;   }     . Main {     background-color:green;     height:200px;     margin-left:120px;     margin-right:120px;   }     . container {     border:1px solid black;   }     <div class= "Container" >   <div class= "left" ></div>   <div class= "right" ></div >   <div class= "main" ></div>   </div>

Advantages: Simple

Disadvantage: The middle part last load, the content is more affected experience

2. BFC rules

The BFC (block formatting context) rule stipulates that BFC does not overlap with floating elements. So if you set the main element to a BFC element:

<style>  . Left {    float:left;    width:100px;    height:200px;    background-color:red;  }   . Right {    float:right;    width:100px;    height:200px;    Background-color:yellow;  }   . Main {    background-color:green;    height:200px;    Overflow:hidden;  }   <div class= "Container" >    <div class= "left" ></div>    <div class= "right" ></div >    <div class= "main" ></div>  </div>

3. Holy Grail Layout

At the heart of the Grail layout is the left, center, and right three columns floating through float and then adjusted with a negative margin.

The first step is to look at the basic layout first

<style>    . Left {        float:left;        width:100px;        height:200px;        background-color:red;    }     . Right {        float:left;        width:100px;        height:200px;        Background-color:yellow;    }     . Main {        float:left;        width:100%;        height:200px;        Background-color:blue;    } </style><body>    <div class= "container" >        <div class= "main" ></div>        <div class= "left" ></div>        <div class= "right" ></div>    </div></body>

The effect is as follows: the left and right columns are squeezed to the second row. This is because the width of main is 100%. Next we will put left, middle, and right in one line by adjusting the margin of the left and right two columns:

. Left {    float:left;    width:100px;    height:200px;    Margin-left: -100%;    background-color:red;} . right {    float:left;    width:100px;    height:200px;    Margin-left: -100px;    Background-color:yellow;}

In the second step, the left Margin-left is set to-100%, at which point it moves to the first row header. Then the margin-left of right is set to a negative value of its width: -100px, the left column will also be moved to and from the top and bottom columns:

But it's not done yet, so let's try adding some text to main:

<body>    <div class= "container" >        <div class= "main" > fjlskdjflkasjdfljasdljlsjdljsdjflksadj</div>        <div class= "left" ></div>        <div class= " Right "></div>    </div></body>

You can see that the text is pressed, and the next thing you need to do is solve it.

The third step, give container a padding, the padding should be exactly equal to the left and right column width:

. container {    padding-left:100px;    padding-right:100px;}

At this point the result is left, middle, and right three columns are overall contraction, but the text is still pressed.

The fourth step is to add a relative layout to the left and right columns, and then move outward by setting the leave and value:

. Left {    float:left;    width:100px;    height:200px;    Margin-left: -100%;    position:relative;    Left: -100px;    background-color:red;} . right {    float:left;    width:100px;    height:200px;    Margin-left: -100px;    position:relative;    Right: -100px;    Background-color:yellow;}

So far, done:

Believe that you have seen these cases you have mastered the method, more wonderful please pay attention to the PHP Chinese network other related articles!

Related reading:

HTML5 how to make a picture in circles animation effect

How to implement mobile-side page scaling in H5

How to implement 3D Dynamic chart chart with H5 canvas

H5 filereader Distribution Read how files should be used and how they are introduced

Related Article

Contact Us

The content source of this page is from Internet, which doesn't represent Alibaba Cloud's opinion; products and services mentioned on that page don't have any relationship with Alibaba Cloud. If the content of the page makes you feel confusing, please write us an email, we will handle the problem within 5 days after receiving your email.

If you find any instances of plagiarism from the community, please send an email to: info-contact@alibabacloud.com and provide relevant evidence. A staff member will contact you within 5 working days.

A Free Trial That Lets You Build Big!

Start building with 50+ products and up to 12 months usage for Elastic Compute Service

  • Sales Support

    1 on 1 presale consultation

  • After-Sales Support

    24/7 Technical Support 6 Free Tickets per Quarter Faster Response

  • Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.