CSS multi-column layout

1. Multi-column and other high layout

This layout is consistent with the height of each column, and the height is the same as the highest column. High-level layout is to maintain the integrity of the border lines, in some places may be to maintain the integrity of the background, to achieve the overall consistency is not missing effect.

The most commonly used method is the padding compensation method:

. container{Overflow:hidden;}.  item{Float:left;  width:100px;  margin-right:10px;  padding-bottom:10000px; margin-bottom:-10000px;} <Divclass= "Container">  <Divclass= "Item">123</Div>  <Divclass= "Item">123<BR/>456<BR/>123</Div>  <Divclass= "Item">456</Div></Div>

The principle of this method is to set the Padding-bottom value of the child column is large enough, when the parent container is also open, and then the Margin-bottom value of the row column is set to a negative number equal to Padding-bottom, the height of the child column is offset, but the content height is not reduced  , the shorter column will use Padding-bottom to compensate for the content height, the last is to set the parent container Over-flow:hidden; By hiding the parts that are out of bounds, the result is a multi-column high effect.

Advantages: Simple and easy to operate, CSS implementation, compatibility is good, applicable to each version of the browser.

Cons: When setting border:3px red solid to the child column; The following issues occur:

Some of the borders cannot be displayed because the part of the parent container is hidden.

2. Using negative margins

. container{Overflow:hidden;    }. wrap{Float:left;  width:100%;    }. left{Float:left;    width:120px;    Margin-left:-100%;  background:red;    }. right{Float:left;    width:150px;    Margin-left: -150px;  Background:green;    }. main{margin-left:120px;    margin-right:150px;  Background:blue; }  <Divclass= "Container">   <Divclass= "Wrap">     <Divclass= "Main">Center</Div>   </Div>   <Divclass= "Left"> Left</Div>   <Divclass= "Right"> Right</Div> </Div>

The principle of this approach is: at the beginning. Wrap's width:100%, which takes up a single line, this time. Left and. Right are in the second row.

Then set the. Left Margin-left:-100%;  The equivalent of a row is shifted upward, and his original position becomes. Right, set the margin-left:-150px of. Right; The equivalent of coming to the tail of the first line

Finally, set the margin-left:120px to. Main in. Wrap;  margin-right:150px; The effect of multi-column layouts is achieved.

Advantages: CSS Implementation, control is relatively easy.

Cons: It can be cumbersome when the number of columns is large.

3.CSS3 Multi-Column layout

CSS3 adds a multi-column layout feature that allows the browser to determine when to end a column and start the next column, which can be done by setting CSS properties. You can set several properties:

Column-width: Width per column

Column-count: The number of columns the element should be delimited.

Column-gap: The interval between columns.

Column-rule: The width, style, and color rules between columns.

. container{    -moz-column-count:3;/* Firefox */    -webkit-column-count:3;/* Safari and Chrome *    / Column-count:3;} <  class= "container">   A person's progress is not their own decision-making, self-feeling good when easy to lose their own, when you need other people's evaluation, Other people's opinions can make you know yourself more clearly. People are in the wrong to grow up, mistakes can make you clearer understanding of themselves, know their shortcomings, so that can better the right remedy, and then challenge themselves, almost perfect. Learning is important, but hindsight is even more important, and looking at yourself from another perspective will have unexpected gains.  </div>

Advantages: Easy to use, easy to control

Cons: Applies only to text, and can be seen from unsupported IE9, in order to be compatible with other browsers need to add a browser prefix.

4.flex layout

The CSS3 also provides an additional layout system. In this new box model, the descendants of the box are laid out horizontally or vertically, and the unused space can be assigned to a particular descendant, or to the descendants that should be expanded by "elasticity", which is allocated among the descendants. The nesting of these boxes (horizontally nested vertically, or vertically nested horizontally) can be used to build layouts in two dimensions.

Flexbox gives a new value to the Display property, and gives box US 8 new properties:

1. Box-orient
2. Box-pack
3. Box-align
4. Box-flex
5. Box-flex-group
6. Box-ordinal-group
7. Box-direction
8. Box-lines

Advantages: Many changes, more flexible use, powerful

Cons: more complex, compatibility is not very good, IE9 incompatible, in order to be compatible with IE10 and other browsers need to add browser prefix.

CSS multi-column layout