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

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

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

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

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

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

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

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

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

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

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

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

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