元素两端对齐
第一个案例是让两个元素分别向左和向右对齐，如果是过去，我一定会用float来实现，但其实用table可以这么做：
|
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
28
29
|
* { box-sizing: border-box;}.content { display: table; border: 1px solid #06c; padding: 15px 5px; max-width: 1000px; margin: 10px auto; min-width: 320px; width: 100%;}.box { width: 100px; height: 100px; border: 1px solid #ccc; text-align: center; display: inline-block; font-size: 40px; line-height: 100px;}.right { text-align: right; display: table-cell}.left { text-align: left; display: table-cell} |
|
1
2
3
4
5
6
7
8
|
<div class="content"> <div class="left"> <div class="box">B</div> </div> <div class="right"> <div class="box">A</div> </div></div> |
自动平均划分每个小模块，使其一行显示
第二个案例我们先看看图：
遇到上面这种布局，一般会用float来做，或者把每个li设置成display:inline-block;来做，并且都要给他们设置一个宽度，而且最痛苦的是5个li如果你设置20%;他们一定会掉下来，如果li都设置成display:table-cell；就不会出现这种情况，即使不设置宽度他们也会在一行显示，你在加多一行他也不会掉下来，依旧会在一样显示。
|
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
28
|
* { box-sizing: border-box;}.content { display: table; border: 1px solid #06c; padding: 15px 5px; max-width: 1000px; margin: 10px auto; min-width: 320px; width: 100%;}.content ul { display: table; width: 100%; padding: 0; border-right: 1px solid #ccc;}.content ul li { display: table-cell; border: 1px solid #ccc; text-align: center; height: 100px; border-right: none; line-height: 100px;} |
|
1
2
3
4
5
6
7
8
9
|
<div class="content"> <ul> <li>1</li> <li>2</li> <li>3</li> <li>4</li> <li>5</li> </ul></div> |
图片垂直居中于元素
|
1
2
3
4
5
|
<div class="content"> <div class="img-box"> <img src="http://jsfiddle.net/img/logo@2x.png" alt="logo" /> </div></div> |
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
|
* { box-sizing: border-box;}.content { display: table; border: 1px solid #06c; padding: 15px 5px; max-width: 1000px; margin: 10px auto; min-width: 320px; width: 100%;}.img-box{ height: 150px; width: 100px; border:1px solid red; display: table-cell; vertical-align: middle; text-align: center; background-color:#4679bd;} |
两box实现等高对齐
上图中的左侧的box的高度始终跟随右侧的box的高度变化而变化
|
1
2
3
4
5
6
7
8
|
<div class="content"> <div class="img-box"> <img src="http://jsfiddle.net/img/logo@2x.png" width="70" alt="logo" /> </div> <div class="text-box"> <span>王尼玛和陈尼玛都是年轻有为的骚年，有一天他们相遇了，然后发现都对对方一见钟情后，所以就愉快的生活在了一起。。。。。王尼玛和陈尼玛都是年轻有为的骚年，有一天他们相遇了，然后发现都对对方一见钟情后，所以就愉快的生活在了一起。。。。。王尼玛和陈尼玛都是年轻有为的骚年，有一天他们相遇了，然后发现都对对方一见钟情后，所以就愉快的生活在了一起。。。。。王尼玛和陈尼玛都是年轻有为的骚年，有一天他们相遇了，然后发现都对对方一见钟情后，所以就愉快的生活在了一起。。。。。王尼玛和陈尼玛都是年轻有为的骚年，有一天他们相遇了，然后发现都对对方一见钟情后，所以就愉快的生活在了一起。。。。。王尼玛和陈尼玛都是年轻有为的骚年，有一天他们相遇了，然后发现都对对方一见钟情后，所以就愉快的生活在了一起。。。。。</span> </div></div> |
|
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
|
* { box-sizing: border-box;}.content { display: table; border: 1px solid #06c; padding: 15px 5px; max-width: 1000px; margin: 10px auto; min-width: 320px; width: 100%;}.img-box{ width: 100px; border:1px solid red; display: table-cell; vertical-align: middle; text-align: center; background-color:#4679bd;}.text-box{ margin-left: 20px; border: 1px solid #ddd; padding: 10px;} |
上面的案例不对右侧的box设置display:table-cell，只对左侧设置，所以就会出现左侧跟随右侧高度变化而变化。
如果要实现不管两个box哪个高度产生变化另一个就跟随，只需要把右侧的box也设置成display:table－cell就可以实现了。
弹性、响应式布局
|
1
2
3
4
5
6
7
8
9
|
<div class="content"> <div class="left-box"> <img src="https://www.google.com.hk/images/srpr/logo11w.png" width="70" alt="logo" /> </div> <div class="right-box"> <span>王尼玛和陈尼玛都是年轻有为的骚年，有一天他们相遇了，然后发现都对对方一见钟情后，所以就愉快的生活在了一起。。。。。王尼玛和陈尼玛都是年轻有为的骚年，有一天他们相遇了，然后发现都对对方一见钟情后，所以就愉快的生活在了一起。。。。。王尼玛和陈尼玛都是年轻有为的骚年，有一天他们相遇了，然后发现都对对方一见钟情后，所以就愉快的生活在了一起。。。。。王尼玛和陈尼玛都是年轻有为的骚年，有一天他们相遇了，然后发现都对对方一见钟情后，所以就愉快的生活在了一起。。。。。王尼玛和陈尼玛都是年轻有为的骚年，有一天他们相遇了，然后发现都对对方一见钟情后，所以就愉快的生活在了一起。。。。。王尼玛和陈尼玛都是年轻有为的骚年，有一天他们相遇了，然后发现都对对方一见钟情后，所以就愉快的生活在了一起。。。。。王尼玛和陈尼玛都是年轻有为的骚年，有一天他们相遇了，然后发现都对对方一见钟情后，所以就愉快的生活在了一起。。。。。王尼玛和陈尼玛都是年轻有为的骚年，有一天他们相遇了，然后发现都对对方一见钟情后，所以就愉快的生活在了一起。。。。。王尼玛和陈尼玛都是年轻有为的骚年，有一天他们相遇了，然后发现都对对方一见钟情后，所以就愉快的生活在了一起。。。。。王尼玛和陈尼玛都是年轻有为的骚年，有一天他们相遇了，然后发现都对对方一见钟情后，所以就愉快的生活在了一起。。。。。王尼玛和陈尼玛都是年轻有为的骚年，有一天他们相遇了，然后发现都对对方一见钟情后，所以就愉快的生活在了一起。。。。。</span> </div> </div> |
|
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
|
* { box-sizing: border-box;}.content { display: table; border: 1px solid #06c; padding: 15px 5px; max-width: 1000px; margin: 10px auto; min-width: 320px; width: 100%;}.left-box { float:left; margin-right: 10px; padding-top:5px;}.right-box { display: table-cell; padding: 10px; border: 1px solid #ccc; margin-right: 10px; vertical-align: top;} |
移动端布局因为有display:box这等属性，所以table-cell相对就排不上什么大用场，不过在移动端你要用table-cell也不是不可以，根据自己对属性的理解去使用就可以了。