多欄自適應布局問題

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

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

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

.wrap{background:gray;} .left{float:left;background:orange;} .right{ display:table-cell;_display:block;zoom:1;background:lime;} <div> ? <div>左側欄</div> ? <div>右側欄</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> ? <div>左側欄</div> ? <div>右側欄</div> ? <div>主體部分</div> </div>點此查看該代碼示例：three_column_layout.html 該案例中，左右側欄分別浮動，主體部分（中間欄）溢出隱藏。這種布局的好處在于，無論外框寬度如何變化，主體部分總能自適應。但從頁面結構上來說，節(jié)點物理順序和視覺邏輯順序不一致，最關鍵的主體部分內容被排在整個文檔的后面，主次分布不合理，總覺得有一些遺憾。另外也會存在一些潛在的風險：如果右側欄包含大量腳本資源，可能會影響甚至阻塞整個頁面的載入（如果選擇使用 iframe或者 ajax 來加載就另當別論）。

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

考慮到頁面結構的復雜程度和體積大小，大型站點的布局方案，個人傾向于采用諸如負邊距之類自適應布局。實現(xiàn)原理可以參考《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> ? <div> ??? <div> ????? <div> ??????? <div>主體部分</div> ????? </div> ????? <div>左側欄</div> ??? </div> ? </div> ? <div>右側欄</div> </div>點此查看該代碼示例：negative_margin_layout.html 雖然實現(xiàn)上要比其他方案更為復雜，需要嵌套多層標簽，在一定程度上有失 HTML 文檔的簡潔性。但一個重要的好處是，其各個區(qū)塊（左側欄、主體部分、右側欄）文檔結構順序可以隨意調換，而在視覺呈現(xiàn)上卻沒有任何差異。目前口碑網的前端布局系統(tǒng)正是應用了這種解決方案，并有專用工具實現(xiàn)布局框架的自動化生成。

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

網站標題：多欄自適應布局問題
地址分享：http://www.muchs.cn/news27/315827.html

成都網站建設公司_創(chuàng)新互聯(lián)，為您提供網站制作、Google、搜索引擎優(yōu)化、品牌網站制作、靜態(tài)網站、網站設計公司

廣告

聲明：本網站發(fā)布的內容（圖片、視頻和文字）以用戶投稿、用戶轉載內容為主，如果涉及侵權請盡快告知，我們將會在第一時間刪除。文章觀點不代表本網站立場，如需處理請聯(lián)系客服。電話：028-86922220；郵箱：631063699@qq.com。內容未經允許不得轉載，或轉載時需注明來源： 創(chuàng)新互聯(lián)