原創(chuàng)：冰極峰    轉(zhuǎn)載請(qǐng)注明出處     時(shí)間：2009年5月10日 0:12:03

藍(lán)色論壇討論貼：http://bbs.blueidea.com/thread-2927057-1-1.html

在我的另一篇文章《彈性+固寬布局》中，我介紹了彈性加最小固定寬度的一種布局方案，現(xiàn)在介紹另一種布局方案---彈性流體布局。

那種方案其實(shí)就是這種布局的變通應(yīng)用。彈性布局最大的優(yōu)點(diǎn)就是能充分利用屏幕空間。無論客戶端分辯率多大，都能自動(dòng)適應(yīng)寬度的變化。

圖一

看看上面這幅圖片，這是國(guó)外的一個(gè)網(wǎng)站，它本身是固定寬度布局的，我們的布局就以這幅圖為基礎(chǔ)來講解的。當(dāng)然，我不會(huì)全面介紹如何制作這個(gè)完整頁面，我只針對(duì)重點(diǎn)做一下講解。

其實(shí)做一個(gè)彈性布局，相對(duì)來說是比較簡(jiǎn)單的，但是這種布局雖簡(jiǎn)單，可是對(duì)于細(xì)節(jié)上的把握才是這種布局的精髓。彈性布局雖說有這么好的優(yōu)點(diǎn)，可是卻有比較致命的缺陷：

1. 如果不對(duì)這種布局設(shè)置一個(gè)最小寬度，當(dāng)用戶縮小窗口到足夠小時(shí)，會(huì)對(duì)布局產(chǎn)生致命的影響。造成嚴(yán)重影響布局錯(cuò)位。

2. 當(dāng)一個(gè)頁面彈性布局時(shí)，對(duì)于里面的圖片會(huì)產(chǎn)生巨大的影響。因?yàn)榈侥壳盀橹?，還沒有解決圖片隨百分比縮放的問題。

所以這篇文章對(duì)于布局的講解可能還相對(duì)少些，而更多的是解決上面的兩個(gè)問題，我相信只要解決了上面的兩個(gè)問題，這種布局相對(duì)來說就容易多了。

一、解決最小寬度

一般彈性布局都是利用百分比來設(shè)置一個(gè)容器的寬度。這樣就能自動(dòng)適應(yīng)屏幕的寬度了。但是寬度值不能完全由用戶自由縮放，我們必須在這個(gè)百分比寬度限制其最小寬度，當(dāng)用戶縮小窗口到一定值，就不讓窗口再縮放了。

熟悉CSS的朋友都知道，有這樣四個(gè)屬性：

Min-width:最小寬度

Max-width:最大寬度

Min-height:最小高度

Max-height:最大高度

這四個(gè)屬性剛好能解決這個(gè)問題，是不是比較欣喜，可是，別忙，雖說它們能解決這個(gè)問題，可是卻有一個(gè)嚴(yán)重的問題，用戶使用最多的瀏覽器IE6卻不支持這幾個(gè)屬性，這是一件非常糟糕的事情。我們總不能丟棄用戶最多的瀏覽器吧！

目前網(wǎng)上比較流行的有四種方法來解決讓IE6支持這四種屬性：

1.     在CSS中expression來設(shè)置最小寬度，比較費(fèi)內(nèi)存。

2.     用嵌套DIV,然后用margin偏移模仿實(shí)現(xiàn)，多冗余結(jié)構(gòu)。

3.     用JQ框架實(shí)現(xiàn)，為一個(gè)屬性加一個(gè)JS框架，有點(diǎn)不劃算。

4.     用純JS代碼實(shí)現(xiàn)。

前面三種都有劣勢(shì)，請(qǐng)各自選擇最合適的方法，我偏重于最后一種，這是國(guó)外的一個(gè)牛人實(shí)現(xiàn)的，相關(guān)例子可以看這兒：http://www.doxdesk.com/software/js/minmax.html

有了這個(gè)JS文件，你只需要在頭部調(diào)用這個(gè)JS文件就可以了。

PS:在演示模型中為了方便，我將這個(gè)JS作為內(nèi)部引用的方式調(diào)用，你們?cè)趯?shí)際應(yīng)用中將這個(gè)JS文件新建為一個(gè)JS外部文件，如下方式調(diào)用：

<script type="text/javascript" src="minmax.js"></script>

我們?cè)跇邮奖碇袑in-width應(yīng)用到#wrapper和#footer這兩個(gè)容器就行了，并分別設(shè)置它們寬度為100%，OK，現(xiàn)在我們解決了最小寬度的問題。

二、解決彈性圖片

我們看看上面哪張圖片，要做成彈性布局，就要解決頁頭圖片的動(dòng)態(tài)縮放。而這是一張圖片，我們都知道圖片是沒有辦法隨比例縮放的，該怎么辦呢？

我們可以換一個(gè)思維方式，將這張圖片在PS中做一點(diǎn)改動(dòng)，我們可以將這張圖片分割成左右兩部分，并將它們合并成一張圖片。如下圖所示：

 

圖二

第一圖片在容器中以背景定位的方式左上定位，而第二張片則右下定位，用兩個(gè)容器分裝兩張圖片，內(nèi)層的圖片級(jí)別比外層圖片級(jí)別高，它會(huì)浮動(dòng)到第一張圖片上蓋住它，當(dāng)然這第二張要做成透明底色的png或gif圖片，因?yàn)閜ng-24位透明圖片在IE6下不受支持，所以我們改成PNG-8位的透明圖片，這樣雖說圖片質(zhì)量上有點(diǎn)影響，但可以保證在IE6中暢通無阻。

所以頁頭的結(jié)構(gòu)層應(yīng)該是如下的樣子：

針對(duì)這樣的結(jié)構(gòu)我們可以寫出如下的樣式：

外層樣式：

內(nèi)層樣式：

經(jīng)過這樣的改進(jìn)后，我們的頁頭就做成彈性的圖片，它在瀏覽器中顯示就應(yīng)該如下：

 

圖三 

這樣，一個(gè)彈性布局就算基本完成了。最終的效果如下圖所示：

圖四

后記：

最后不得不提的是，這種布局是有局限性的，并不是每個(gè)網(wǎng)頁都能適合用這種方式來布局。因?yàn)榱黧w彈性布局本身存在的缺陷。它不能用于設(shè)計(jì)得太過華麗、圖片豐富的頁面，因?yàn)橛行﹫D片是沒有辦法做到象上圖哪樣伸縮的。我想正是因?yàn)檫@個(gè)原因，它限制了這種布局的廣泛流傳。

演示頁面： 

• 布局