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

.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 屬性，必須通過(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相類似的方案：

.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è)欄分別浮動(dòng)，主體部分（中間欄）溢出隱藏。這種布局的好處在于，無(wú)論外框?qū)挾热绾巫兓?，主體部分總能自適應(yīng)。但從頁(yè)面結(jié)構(gòu)上來(lái)說(shuō)，節(jié)點(diǎn)物理順序和視覺(jué)邏輯順序不一致，最關(guān)鍵的主體部分內(nèi)容被排在整個(gè)文檔的后面，主次分布不合理，總覺(jué)得有一些遺憾。另外也會(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ō)明：

.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 文檔的簡(jiǎn)潔性。但一個(gè)重要的好處是，其各個(gè)區(qū)塊（左側(cè)欄、主體部分、右側(cè)欄）文檔結(jié)構(gòu)順序可以隨意調(diào)換，而在視覺(jué)呈現(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è)定寬度，顯得更為靈活。

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

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

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

廣告

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