解决方法
FlexBox
如果你在2013年下半年阅读,你可以使用flexBox。假设这个布局:
<div class="row"> <div class="col">...</div> <div class="col">...</div> <div class="col">...</div> </div>
使用flexBox,等高列只是一个声明:
.row { display: flex; /* equal height of the children */ } .col { flex: 1; /* additionally,equal width */ }
浏览器支持:http://caniuse.com/flexbox; demo:http://jsfiddle.net/7L7rS/
表布局
如果你仍然需要支持IE 8或9,那么你必须使用表格布局:
.row { display: table; } .col { display: table-cell; width: 33.33%; /* depends on the number of columns */ }