一些自適應(yīng)布局的問題

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

.wrap{background:gray;} .left{float:left;background:orange;} .right{ display:table-cell;_display:block;zoom:1;background:lime;} <div> <div>左側(cè)欄</div> <div>右側(cè)欄</div> </div>點(diǎn)此查看該代碼示例：two_column_layout.html 由于IE6并不支持 display:table-cell 屬性，必須通過 CSS hack 來彌補(bǔ)這個缺陷。這里可以稍作改進(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相類似的方案：

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

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

考慮到頁面結(jié)構(gòu)的復(fù)雜程度和體積大小，大型站點(diǎn)的布局方案，個人傾向于采用諸如負(fù)邊距之類自適應(yīng)布局。實(shí)現(xiàn)原理可以參考《Creating Liquid Layouts with Negative Margins》這篇文章。利用負(fù)邊距可以構(gòu)建出很多復(fù)雜的流體布局形式。這里以 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>左側(cè)欄</div> </div> </div> <div>右側(cè)欄</div> </div>點(diǎn)此查看該代碼示例：negative_margin_layout.html 雖然實(shí)現(xiàn)上要比其他方案更為復(fù)雜，需要嵌套多層標(biāo)簽，在一定程度上有失 HTML 文檔的簡潔性。但一個重要的好處是，其各個區(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è)定寬度，顯得更為靈活。

本文來源于成都網(wǎng)站建設(shè)公司與成都網(wǎng)站設(shè)計(jì)制作公司-創(chuàng)新互聯(lián)成都公司！

新聞名稱：一些自適應(yīng)布局的問題
網(wǎng)頁地址：http://www.muchs.cn/news7/320357.html

成都網(wǎng)站建設(shè)公司_創(chuàng)新互聯(lián)，為您提供外貿(mào)建站、網(wǎng)頁設(shè)計(jì)公司、搜索引擎優(yōu)化、全網(wǎng)營銷推廣、小程序開發(fā)、網(wǎng)站建設(shè)

廣告

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