CSS to achieve three-column layout (five kinds)

Common layout: float layout, Position positioning, table layout, elastic (flex) layout, grid (grid) layout

Then we are done with five or more three-column layout mode, but only if the left-right width (width if about 300px by), the overall height of the known (if 100px height), width adaptive intermediate

1, float layout:

After the float initial design of the original intention was to solve the problem of text wrapping, which set the float property to a picture will display the text flows around the image. The reason why the float can be achieved is due to set text wrapping properties of elements can float out of the document flow, the height of the parent element collapse.

Well aware of the role of float after us to achieve three-column layout.

First the first to write html template code is as follows:

<!DOCTYPE html>
<html lang="en"> <head> <meta charset="UTF-8"> <title>浮动实现三栏布局</title> <style type="text/css"> *{ margin: 0; padding: 0; } </style> </head> <body> <article class="main"> <div class="left">左</div> <div class="right">右</div> <div class="center">中 <h2>浮动布局</h2> </div> </article> </body> </html>

html templates written, then we begin to implement CSS styles:

Here we set the bar for about two float property away from the flow of the document to the left column to set float: left, right column to set float: right, because the width of the known height so that we can specify the width and height to set width: 300px, height: 100px

.left{
    float: left;
    width: 300px;
    height: 100px; background: #631D9F; } .right{ float: right; width: 300px; height: 100px; background: red; }

Now both sides of the written style, so we have to write in the middle of styles,

.center{
    margin-left: 300px;
    margin-right: 300px;
    background-color: #4990E2;
}

Why here to set the margin-left, and margin-right it? If you write the code for small hands will find partners not set in the middle of these two properties effect element content is relatively small when the effect is normal, but if the child element if the middle element content particularly when there will be the following: as shown below :

So these two properties still need to add. This location float to achieve three-column layout has been OK, here to remind Because we use a float, so as not to affect other elements of the show here need to clear the float, float clear there are many ways you can use the search on their own here I use pseudo-elements The way

.main::after{
    content:'';
    display: block; clear: both; }

2, Position Layout:

First the first to write html template:

<!DOCTYPE html>
<html lang="en"> <head> <meta charset="UTF-8"> <title>position</title> <style type="text/css"> *{ margin: 0; padding: 0; } </head> <body> <article class="main"> <div class="left">左</div> <div class="center">中 <h2>绝对定位</h2> </div> <div class="right">右</div> </article> </body> </html>

position is to set the type of positioning elements that we use the kind of positioning it? Here we can simply look at the types of property

position its properties there are five:

inherit: position attribute values inherited from the parent element

static: the default value is not located

fixed: generating element absolute positioning, relative to the browser window is positioned (regardless of how the screen contents to slide, its position will not change)

relative: generating relative positioning, positioning relative to its normal position

absolute: generating absolute positioning elements, corresponding to the first parent element is positioned outside the static positioning.

From the above we can see that we need to choose to use the left, right and absolute absolute positioning, because the absolute is equivalent to the first parent element other than static positioning to locate, so we give the parent element to position: relative property, In this way the three sub-elements relative to the parent element absolute positioning.

Thus, we can write a very simple CSS styles:

.left{
    position: absolute;
    left: 0;
    width: 300px; background-color: red; } .center{ position: absolute; left: 300px; right: 300px; background-color: blue; } .right{ position: absolute; right: 0; width: 300px; background-color: #3A2CAC; }

Once you understand the position attribute meaning to write this way is relatively simple

3, table layout:

First the first to write html template: here html templates and html position as used here is not to copy the code.

table layout is a common way, he can set the entire page of rows and columns in the manner of the table, but due to the writing table tag is too much trouble, especially when it comes to table an embedded table of the time, so CSS provides us with display : table of ways to make them convenient to make use table layout, set up sub-elements for the attribute column to display: table-cell

Understand the properties of table layout so you can write the CSS styles:

.main{
    width: 100%;
    display: table;
}
.left,.center,.right{ display: table-cell; } .left{ width: 300px; background-color: red; } .center{ background-color: blue; } .right{ width: 300px; background-color: red; }

As the table layout itself has its own unique attributes, so we only need to set its properties dispaly we can achieve our goal. Use is still very convenient.

4, the elastic (flex) Layout:

First the first to write html template: here html templates and html position as used here is not to copy the code.

flex layout is a W3C proposed a new program can be simple, complete and responsive to achieve a variety of page layouts.

When the element is set to display: flex, the flex element is a container, the container is a member of its child elements, called flex project, each project default arrangement from left to right way, so we can easily write CSS style:

.main {
    display: flex;
}
.left{
    width: 400px; background-color: red; } .center{ background-color: blue; word-break: break-word; } .right{ background-color: red; width: 400px; }

If you want to learn more flex layout you can look at the link:

http://www.ruanyifeng.com/blog/2015/07/flex-grammar.html

5, grid (gird) Layout:

First the first to write html template: here html templates and html position as used here is not to copy the code.

It is divided into a grid page grids can be any combination of different grid, make a variety of layouts.

The property display value is set grid , or inline-grid to create a mesh container, all containers direct child node automatically becomes the grid project.

gird provides gird-template-columns, grid-template-rows attribute let us set the row height and column width

According to the properties we can write the following CSS styles:

.div{
    width: 100%;
    display: grid;
    grid-template-rows: 100px; grid-template-columns: 300px auto 300px; }

Only four lines of CSS code can be achieved three-column layout, it is not felt the power of gird it

to sum up:

More offers five ways to achieve three-column layout so their advantages and disadvantages of it?

1, float layout is now more and more portals with many layout currently using this layout, use of the time need only note must be clear float.

2, Position layout just based on positioning attributes directly to the element position, individuals feel less suitable for page layout

3, table layout easy to use, compatibility is not a problem, is not conducive to search engine crawlers information

4, flex layout more powerful, but IE compatibility issues still exist, only support to more than IE9

5, grid layout is very powerful, but very poor compatibility.