Layout: multi-column layout method Contour

Contour multi-column layout is more common in practical applications, as a point of interviewing often encountered. To be summed up.

First thought is to flex the first and min-height, after a friend reminded, try to remove the min-height. Since the align-items Stretch default, all elements will be stretched to the same height, so with the default contour effect.

flex is simple and convenient, but also now commonly used. If you do not need compatibility with older browsers, this will be very easy to use.

HTML：

. 1    <div class = "wrap">
 2      <div class = "Box" style = "background-Color: # F00;"> This is left SUMMARY </ div>
 . 3      <div class = "Box" style = "background- color: # 0f0; "> this is the middle of the content of the right to temporarily empty. This is the middle of the content of the right to temporarily empty. This is the middle of the content of the right to temporarily empty. This is the middle of the content of the right to temporarily empty. This is the middle of the content of the right to temporarily empty. This is the middle of the content of the right to temporarily empty. </ div>
 . 4      <div class = "Box" style = "background-Color: # 00F;"> </ div>
 . 5    </ div>

css:

1     .wrap {
2       display: flex;
3     }
4     .wrap .box {
5       display: flex;
6       flex: 1;
7       /* min-height: 100%; */
8     }

effect:

2, padding compensation method.

First padding-bottom is set very large, then the margin-bottom is set to be the opposite of the size of the offset. Then set up outside the parent hidden. When any one become the maximum, the other columns will be shorter than this column by their padding-bottom part of the height to compensate for this difference.

css:

 1     .wrap {
 2       margin-top: 20px;
 3       overflow: hidden;
 4     }
 5     .wrap .box {
 6       width: 200px;
 7       float: left;
 8       padding-bottom: 1000px;
 9       margin-bottom: -1000px;
10     }

3, achieved by the positioning (pseudo contour), representing only the upper part of the bezel most part low, look at the code:

 1     .wrap {
 2       position: relative;
 3     }
 4     .wrap .box:nth-of-type(1) {
 5       width: 200px;
 6       position: absolute;
 7       top: 0;
 8       left: 0;
 9     }
10     .wrap .box:nth-of-type(2) {
11       width: 400px;
12       border-left: 200px solid #f00;
13       border-right: 300px solid #00f;
14     }
15     .wrap .box:nth-of-type(3) {
16       width: 300px;
17       position: absolute;
18       top: 0;
19       left: 600px;
20     }

4, table-cell. natural layout table-cell layout is high. as follows:

1     .wrap .box {
2       display: table-cell;
3       width: 30%;
4     }

 

Find references found there are a variety of other implementations, some of the more complex it is in relation to the above, and therefore not recorded. Unless these four methods above does not work, no need to remember or understand the idea as a way to develop their own ideas. Those methods Baidu can get. In this tightly connected.