等高布局

含义：等高布局就是一行被划分成若干列，每一。列的高度是相同的值；

利用 table 实现；
padding-bottom: 9999px; margin-bot tom: -9999px 实现 ;

利用 table 实现

css

*{ margin:0;padding:0; }
#parent{
    width: 100%;
    /* table */
    display: table;
}

#left ,
#right {
 width: 300px;
 /*td*/
 display: table-cell;
}

#left {
 background-color: #c9394a;
}
#right {
 background-color: #cccccc;
}

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20

margin

css

*{ margin:0;padding:0; }

/* 伪等高布局 */
#parent{
 width: 100%;
 /* 溢出隐藏 */
 overflow:hidden;
}

#left ,
#right {
 width: 300px;
 float:left;
 /* 内填充的方法 足够大 9999px */
 padding-bottom: 9999px;

 /* 外间距抵消 */
 margin-bottom: -9999px;
}

#left {
 background-color: #c9394a;
}

#right {
 background-color: #cccccc;
}

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27

等高布局 #

利用 table 实现 #

margin #

等高布局

利用 table 实现

margin