CSS sub-layout method

Original link: http://caibaojian.com/css-equal-layout.html

CSS, such as proportional division, in the CSS layout is more important, the following share several common methods and explore compatibility.

One: Floating layout + percent

emmet html代码：ul.float-ul>li*5>.con>h3{等分标题}+p{等分内容等分内容}

.float-ul{width: 100%; overflow: hidden; zoom: 1;}.float-ul li{float: left; width: 20%;}

This style of compatibility is good, but can not be implemented when the number of columns in the scale changes, you have to manually modify, of course, you can also use a JS to adjust.

Two: inline element (Inline-block) + percent

Refer to the previously written inline-block to replace the float's code, and use this style to implement the attributes of block-level elements such as layout centering.

.inline-ul{font-size: 0; *word-spacing: -1px;}.inline-ul li{display: inline-block; *display: inline; *zoom: 1; font-size: 14px; vertical-align: top; word-spacing: normal; letter-spacing: normal; width: 20%;}@media screen and (-webkit-min-device-pixel-ratio:0){.inline-ul{letter-spacing: -5px;}}

Three: Display:table + Display:table-cell

We know that tables can be divided by content, andCSS has a style of display:table to implement similar tables, but IE8 the following browsers are not supported.

.table-cell{display: table; width: 100%;}.table-cell li{display: table-cell;}

Four: Use css3 display:flex.

Old Syntax: ·

.flex-ul{display: -webkit-box; display: box;}.flex-ul li{-webkit-box-flex:1; box-flex:1;}

New syntax:

.flex-ul{display:-webkit-flex; display: flex; width: 100%;}.flex-ul li{-webkit-flex:1; flex:1;}

This method is only applicable to the advanced browser, IE10 or forget the following. Specific introduction

V: Using a rasterized system

For example, a bootstrap grid system

Code from http://caibaojian.com/css-equal-layout.html<div class="container">  <div class="row">    <div class="col-md-3"></div>    ...  </div></div>

.col-md-3 { float:left; }@media (min-width: 992px) {  .col-md-3 { width: 25%; }  /* 父级容器的3/12 */}

The disadvantage is that, like the first float, you need to jump out of the width adjustment based on the number of columns.

Summary:

If you need compatible IE6-IE7, you can use the first and second types if the number of columns is fixed. If the number of columns is not fixed, you can add a small amount of JS support.

If you are only considering moving, consider the third, compatibility is better than the flex support below.

If you simply do not consider the lower version of the browser, you can consider the use of the fourth.

CSS sub-layout method