元素兩端對齊
第一個案例是讓兩個元素分別向左和向右對齊，如果是過去，我一定會用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如果你設置width: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也不是不可以，根據自己對屬性的理解去使用就可以了。