CSS實現多列等寬的方法詳解

實現方法有css與js三種方法了，下面我們一起來看看．

網頁中多列等寬是很常見的布局，一般使用百分比的 width 屬性即可輕鬆實現。

 

但是我真正想要說得是，在不明確到底有多少元素的情況下實現多列等寬，比如網站的投影片導航：

 

投影片導航的數量會隨著投影片的數量變化，元素數量不是固定的。需要完全等寬，並且佔滿整個父級元素。

我想出了三種解決方案，下邊分別介紹。

display: table-cell

第一種方法利用 display 屬性的 table-cell 值，把元素變成表格，就可以等寬了。

<style type="text/css">
 .box {
  width: 600px;
 }
 
 .box div {
  color: #FFF;
  display: table-cell;
  height: 150px;
 }
</style>
<div class="box">
 <div style="background: #666;">
  <span>第1列  第1列  第1列  第1列</span>
 </div>
 <div style="background: #444;">
  <span>第2列  第2列  第2列  第2列</span>
 </div>
 <div style="background: #222;">
  <span>第3列  第3列  第3列  第3列</span>
 </div>
 <div style="background: #000;">
  <span>第4列  第4列  第4列  第4列</span>
 </div>
</div>
這種方法是比較好的，相容到 IE8。

權衡相容性和複雜程度之後我選擇了這種方案。

box-flex

box-flex 屬性是 CSS3 的新東西，他可以把父元素的寬度分配給子項目，就像分數一樣。

假設一個容器的寬度是 1200px，裡邊有三個子項目。

如果三個子項目的 box-flex 屬性都設定成 1，那麼它們將平分 1200px，也就是每個元素會獲得 400px 的寬度。

如果一個元素的 box-flex 屬性設定成 2，其餘的兩個設定成 1，那麼設定成 2 的元素將會有 600px 的寬度，設定成 1 的兩個元素會有 300px 的寬度。

看到這裡，就會發現 box-flex 屬性實在是太好了有木有，用它實現多列等高輕而易舉，而且非常好理解。

<style type="text/css">
 .box {
  width: 600px;
  display: -webkit-box;/* 注意這裡 */
 }
 
 .box:after {
  content: '';
  height: 0;
  display: block;
  clear: both;
 }
 
 .box div {
  color: #FFF;
  box-flex: 1;
  -webkit-box-flex: 1;
  -moz-box-flex: 1;
  height: 150px;
  float: none;
 }
</style>
<div class="box">
 <div style="background: #666;">
  <span>第1列</span>
 </div>
 <div style="background: #444;">
  <span>第2列</span>
 </div>
 <div style="background: #222;">
  <span>第3列</span>
 </div>
 <div style="background: #000;">
  <span>第4列</span>
 </div>
</div>
可惜這種方法相容性不佳，只有 IE10+ 和 Chrome 等瀏覽器支援，但這麼強大的屬性還是瞭解一下比較好。

JavaScript

最後一種方法就不是純 CSS 了，需要使用 JS 實現，這種方法相容性最好，支援幾乎目前所有瀏覽器，但是比較麻煩。

<style type="text/css">
 .box {
  width: 600px;
 }
 
 .box:after {
  content: '';
  height: 0;
  display: block;
  clear: both;
 }
 
 .box div {
  color: #FFF;
  height: 150px;
  float: left;
 }
</style>
<script>
 window.onload = function(){
  var box = document.getElementById( 'box' ),
   Elements = box.getElementsByTagName( 'div' ),
   width = box.currentStyle ? box.currentStyle['width'] : document.defaultView.getComputedStyle( box, false )['width'];
  width = parseInt( width );
  for( var i = Elements.length - 1; i >= 0; i-- ){
   Elements[i].style.width = width / Elements.length + 'px';
  };
 }
</script>
<div class="box" id="box">
 <div style="background: #666;">
  <span>第1列</span>
 </div>
 <div style="background: #444;">
  <span>第2列</span>
 </div>
 <div style="background: #222;">
  <span>第3列</span>
 </div>
 <div style="background: #000;">
  <span>第4列</span>
 </div>
</div>