Horizontal split plan A: percentage width float

It can be compatible with all browsers, but some hacks need to be used to solve the problem of float positioning, and clearing of floats needs to be considered.

In the case where many proportions (1/3, 2/3 are the most common cases) are not divisible, an error of 1px occurs in some cases.

Horizontal split plan B: percentage width inline-box without gap

The disadvantages are the same as above. The amount of hacks is about the same as Plan A.

The additional benefit is that there are many vertical-align methods that can be specified. The additional disadvantage is that many vertical-align attribute values ​​​​are different for each browser. The most common vertical-align is still middle and baseline, with top and bottom added at most.

Horizontal split plan C: Table

Using tables is of course an option supported by all browsers.

Horizontal split plan D: display attribute instead of table

Replace tables with attributes such as display:table and display:table-cell to take into account semantics. IE8 and modern browser support.

More forward-looking attributes...

• Use css3’s new feature calc to calculate values ​​ float/inline-box
• Use flexbox

The following introduces a set of reusable solutions for bootstrap. This set of solutions is developed from solution A. The main idea is to extract reusable classes in the layout.

A common column split is as follows:

<p class="container">
  <p class="row">
    <p class="col-md-3"></p>
    ...
  </p>
</p>

The core of bootstrap's grid system is to use such a three-layer structure, and the innermost layer uses width to allocate 100% of the parent width.

The class name rule for a single column is: col-[lg/md/sm/xs]-[1~12]. See bootstrap grid options for details.

The middle variable is related to responsive media query and will not be explained in detail here. The last value x is equal to 1/12 of the parent container multiplied by x. As follows:

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

In the bootstrap grid system, there is a 30px gap between each col. How to divide the gap equally? See the following CSS properties:

/* 列容器设置左右padding */
.col-md-3 {
  min-height: 1px;
  padding-right: 15px;
  padding-left: 15px;
}
/* 行容器设置负margin撑开 */
.row {
  margin-right: -15px;
  margin-left: -15px;
}
/* 行容器清理浮动 */
.row:before,
.row:after {
  display: table;
  content: " ";
}
.row:after {
  clear: both;
}
/* container再补完被row挖去的15px */
.container {
  padding-right: 15px;
  padding-left: 15px;
}

Wait, is there something wrong? Calculate the width:

每一个col-md-3的最终宽度 = 父容器宽度 * 25% + 15px * 2 (padding宽度) + 0 (border宽度)

How come each one is divided equally into 1/4 of the parent container?

There is also this attribute in action:

*, *:before, *:after {
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
}

bootstrap uses * to select all elements (this is the reason why I am tired of bootstrap, sacrificing selector efficiency for development efficiency), and forces the use of border-box to calculate the width, thus achieving a large layout Harmony has this calculation formula:

父容器宽度 * 25% = 每一个col-md-3的最终宽度 + 15px * 2 (padding宽度) + 0 (border宽度)

After doing this, you can easily use the corresponding class, or you can cascade it, similar to row-col-row-col-row-col...

    p.container
        h1 test
        p.row
            p.col-sm-6
                p.row
                    p.col-sm-6
                        img(src="holder.js/100%x180")
                    p.col-sm-6
                        img(src="holder.js/100%x180")
            p.col-sm-6
                p.row
                    p.col-sm-3
                        img(src="holder.js/100%x180")
                    p.col-sm-9
                        img(src="holder.js/100%x180")

(The above uses jade’s syntax to display the hierarchy, and bootstrap’s holder.js to supplement an img element to display the effect). The effect is as follows:

The bootstrap solution is applicable to IE8 and other modern browsers. In this solution, the main problem lies in the compatibility of the box-sizing attribute. The minor flaw is the ±1px error caused by the percentage width.

I think it can be similar to the navigation bar

http://thjiang.sinaapp.com/59

width is the same, float:left