多欄自適應布局問題淺談

在網頁局部的布局上，需要采用大量的自適應，來滿足不同長度數據、內容的合理呈現。以此保證頁面不至於因為內容過多等原因，導致重疊、溢出、撐開等破壞整體視覺效果的情況。這裡就簡單談談幾個自己碰到過的自適應問題。

1、兩欄自適應布局

在實際項目中，常常遇到如紅色線框部分的兩欄自適應問題。其關鍵點是，左右兩欄均不定寬，右側欄條目數量不定。

針對這種場景，可以采用兩欄均浮動的方法。參考 Object-oriented CSS 中應用到的布局方案，則需要套用兩層標簽實現，兩欄中一欄浮動，另一欄寬度自適應：

.wrap{background:gray;}
.left{float:left;background:orange;}
.right{ display:table-cell;_display:block;zoom:1;background:lime;}
<div class="wrap">
  <div class="left">左側欄</div>
  <div class="right">右側欄</div>
</div>

點此查看該代碼示例：two_column_layout.html
由於IE6並不支持 display:table-cell 屬性，必須通過 CSS hack 來彌補這個缺陷。這裡可以稍作改進，右側欄直接設定 overflow:auto;zoom:1 或者 overflow:hidden;zoom:1 的樣式。

2、三欄自適應布局

談到三欄自適應布局，這應該是最為基本的網頁排版形式了。以Amazon首頁來說，其自適應布局采用的是與Object-oriented CSS相類似的方案：

.wrap{background:gray;}
.left{float:left;width:250px;background:red;}
.right{float:right;width:300px;background:orange;}
.main{overflow:hidden;zoom:1;background:lime;}
<div class="wrap">
  <div class="left">左側欄</div>
  <div class="right">右側欄</div>
  <div class="main">主體部分</div>
</div>

點此查看該代碼示例：three_column_layout.html
該案例中，左右側欄分別浮動，主體部分（中間欄）溢出隱藏。這種布局的好處在於，無論外框寬度如何變化，主體部分總能自適應。但從頁面結構上來說，節點物理順序和視覺邏輯順序不一致，最關鍵的主體部分內容被排在整個文檔的後面，主次分布不合理，總覺得有一些遺憾。另外也會存在一些潛在的風險：如果右側欄包含大量腳本資源，可能會影響甚至阻塞整個頁面的載入（如果選擇使用 iframe或者 ajax 來加載就另當別論）。

眾所周知，HTML文檔是順序解析的。在這張使用 WebPageTest 對 Amazon 首頁渲染過程的某一時刻截圖中，可以發現左右兩側的內容率先予以呈現，而主體部分會造成一定時間的空白。因此這種方案並不宜用於整站頁面框架的搭建。

考慮到頁面結構的複雜程度和體積大小，大型站點的布局方案，個人傾向於采用諸如負邊距之類自適應布局。實現原理可以參考《Creating Liquid Layouts with Negative Margins》這篇文章。利用負邊距可以構建出很多複雜的流體布局形式。這裡以 YUI 框架提供的柵格方案為例來說明：

.wrap{}
.section{float:left;margin-right:-40em;width:100%;}
.g1{margin-right:310px;float:none;width:auto;position:static;}
.g2{float:right;margin-left:-40em;width:100%;}
.main{margin-left:210px;float:none;width:auto;position:static;overflow:auto;background:red;}
.left{float:left;width:200px;position:relative;background:orange;}
.aside{float:right;width:300px;position:relative;background:lime;}
<div class="wrap">
  <div class="section">
    <div class="g1">
      <div class="g2">
        <div class="main">主體部分</div>
      </div>
      <div class="left">左側欄</div>
    </div>
  </div>
  <div class="aside">右側欄</div>
</div>

點此查看該代碼示例：negative_margin_layout.html
雖然實現上要比其他方案更為複雜，需要嵌套多層標簽，在一定程度上有失 HTML 文檔的簡潔性。但一個重要的好處是，其各個區塊（左側欄、主體部分、右側欄）文檔結構順序可以隨意調換，而在視覺呈現上卻沒有任何差異。目前口碑網的前端布局系統正是應用了這種解決方案，並有專用工具實現布局框架的自動化生成。

3、自適應柵格化布局

Object-oriented CSS 提出了一種結構化的多欄自適應布局，利用柵格控制容器寬度，內容控制容器高度。使得多層嵌套的自適應柵格化布局清晰明了。如果應用到類似表格的頁面排版，這種方法行之有效。詳細參考自適應柵格化布局代碼示例：grid_layout.html
而目前大量的網站正在使用 950px/960px 寬度的柵格系統，固定最小柵格單元的寬度，保證整體結構的合理、穩定和一致。與其相比，在局部頁面布局中，建議使用 Object-oriented CSS 這種簡潔的、基於百分比的柵格方案。如果可以保證內部所有區塊自適應，就只需要對最外層容器設定寬度，顯得更為靈活。