使用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+的市场份额也越来越多了，或许这种方式的布局后面会比较流行，原因就是简单粗暴。
