使用display:table使两栏布局高度相等

两栏布局大家应该经常用了,但是遇到坑爹的要两栏的高度对齐的话要怎么办呢?

 1 <!DOCTYPE html>

 2 <html>

 3 <head>

 4 <meta charset="utf-8">

 5 <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">

 6 <title>Examples</title>

 7 <style type="text/css">

 8     *{

 9         margin:0;

10         padding:0;

11         border: 0 none;

12     }

13     #main{

14         width:100%;

15     }

16     div.sideBar{

17         width:70%;

18         height:100%;

19         background:#CD2020;

20         float:left;

21     }

22     div.content{

23         width:28%;

24         background:#2054CD;

25         height:100%;

26         float:right;

27     }

28     div.clear{

29         clear: both;

30         width:100%;

31         height:1px;

32     }

33 </style>

34 <link href="" rel="stylesheet">

35 </head>

36 <body>

37     <div id="main">

38         <div class="sideBar">

39             <p>这是测试</p>

40             <p>这是测试</p>

41             <p>这是测试</p>

42             <p>这是测试</p>

43             <p>这是测试</p>

44             <p>这是测试</p>

45             <p>这是测试</p>

46             <p>这是测试</p>

47             <p>这是测试</p>

48             <p>这是测试</p>

49             <p>这是测试</p>

50             <p>这是测试</p>

51         </div>

52         <div class="content">

53             <p>这是测试</p>

54             <p>这是测试</p>

55             <p>这是测试</p>

56             <p>这是测试</p>

57         </div>

58         <div class="clear"></div>

59     </div>

60 </body>

61 </html>

就像这样的,左边的高度和右边的高度明显不一样,但是我想要给右边的一点颜色,然后让它看起来"cool"一点怎么办呢?

以前想的是用JS获取左边元素高度然后设置右边元素高度为相同值,现在有display:table这个东西就很好解决了。

还是那个基本的思想,行为和样式要分离的思想。所以我们用display:block解决它吧。

 1 <!DOCTYPE html>

 2 <html>

 3 <head>

 4 <meta charset="utf-8">

 5 <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">

 6 <title>Examples</title>

 7 <style type="text/css">

 8     *{

 9         margin:0;

10         padding:0;

11         border: 0 none;

12     }

13     #main{

14         width:100%;

15         display: table;

16     }

17     div.sideBar{

18         width:70%;

19         height:100%;

20         background:#CD2020;

21         display: table-cell;

22     }

23     div.content{

24         width:28%;

25         background:#2054CD;

26         height:100%;

27         display: table-cell;

28     }

29     div.clear{

30         clear: both;

31         width:100%;

32         height:1px;

33     }

34 </style>

35 <link href="" rel="stylesheet">

36 </head>

37 <body>

38     <div id="main">

39         <div class="sideBar">

40             <p>这是测试</p>

41             <p>这是测试</p>

42             <p>这是测试</p>

43             <p>这是测试</p>

44             <p>这是测试</p>

45             <p>这是测试</p>

46             <p>这是测试</p>

47             <p>这是测试</p>

48             <p>这是测试</p>

49             <p>这是测试</p>

50             <p>这是测试</p>

51             <p>这是测试</p>

52         </div>

53         <div class="content">

54             <p>这是测试</p>

55             <p>这是测试</p>

56             <p>这是测试</p>

57             <p>这是测试</p>

58         </div>

60     </div>

61 </body>

62 </html>

是的,我们连float都不用加就可以轻松实现等高度的两栏布局了。虽然有点倒退回表格布局的嫌疑 ——!! 。

但是问题也来了,IE8+才支持display:table这个属性--!!

不过所幸现在IE6的市场份额越来越少了,IE8+的市场份额也越来越多了,或许这种方式的布局后面会比较流行,原因就是简单粗暴。

 

你可能感兴趣的:(display)