在網(wǎng)頁局部的布局上，需要采用大量的自適應(yīng)，來滿足不同長度數(shù)據(jù)、內(nèi)容的合理呈現(xiàn)。以此保證頁面不至于因?yàn)閮?nèi)容過多等原因，導(dǎo)致重疊、溢出、撐開等破壞整體視覺效果的情況。這里就簡單談?wù)剮讉€(gè)自己碰到過的自適應(yīng)問題。

1、兩欄自適應(yīng)布局

在實(shí)際項(xiàng)目中，常常遇到如紅色線框部分的兩欄自適應(yīng)問題。其關(guān)鍵點(diǎn)是，左右兩欄均不定寬，右側(cè)欄條目數(shù)量不定。

針對這種場景，可以采用兩欄均浮動的方法。參考 Object-oriented CSS 中應(yīng)用到的布局方案，則需要套用兩層標(biāo)簽實(shí)現(xiàn)，兩欄中一欄浮動，另一欄寬度自適應(yīng)：

點(diǎn)此查看該代碼示例：two_column_layout.html
由于IE6并不支持 display:table-cell 屬性，必須通過 CSS hack 來彌補(bǔ)這個(gè)缺陷。這里可以稍作改進(jìn)，右側(cè)欄直接設(shè)定 overflow:auto;zoom:1 或者 overflow:hidden;zoom:1 的樣式。

2、三欄自適應(yīng)布局

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

點(diǎn)此查看該代碼示例：three_column_layout.html
該案例中，左右側(cè)欄分別浮動，主體部分（中間欄）溢出隱藏。這種布局的好處在于，無論外框?qū)挾热绾巫兓黧w部分總能自適應(yīng)。但從頁面結(jié)構(gòu)上來說，節(jié)點(diǎn)物理順序和視覺邏輯順序不一致，最關(guān)鍵的主體部分內(nèi)容被排在整個(gè)文檔的后面，主次分布不合理，總覺得有一些遺憾。另外也會存在一些潛在的風(fēng)險(xiǎn)：如果右側(cè)欄包含大量腳本資源，可能會影響甚至阻塞整個(gè)頁面的載入（如果選擇使用 iframe或者 ajax 來加載就另當(dāng)別論）。

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

考慮到頁面結(jié)構(gòu)的復(fù)雜程度和體積大小，大型站點(diǎn)的布局方案，個(gè)人傾向于采用諸如負(fù)邊距之類自適應(yīng)布局。實(shí)現(xiàn)原理可以參考《Creating Liquid Layouts with Negative Margins》這篇文章。利用負(fù)邊距可以構(gòu)建出很多復(fù)雜的流體布局形式。這里以 YUI 框架提供的柵格方案為例來說明：

點(diǎn)此查看該代碼示例：negative_margin_layout.html
雖然實(shí)現(xiàn)上要比其他方案更為復(fù)雜，需要嵌套多層標(biāo)簽，在一定程度上有失 HTML 文檔的簡潔性。但一個(gè)重要的好處是，其各個(gè)區(qū)塊（左側(cè)欄、主體部分、右側(cè)欄）文檔結(jié)構(gòu)順序可以隨意調(diào)換，而在視覺呈現(xiàn)上卻沒有任何差異。目前口碑網(wǎng)的前端布局系統(tǒng)正是應(yīng)用了這種解決方案，并有專用工具實(shí)現(xiàn)布局框架的自動化生成。

3、自適應(yīng)柵格化布局

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