藍色論壇討論貼：
在我的另一篇文章《彈性+固寬布局》中，我介紹了彈性加最小固定寬度的一種布局方案，現在介紹另一種布局方案---彈性流體布局。
那種方案其實就是這種布局的變通應用。彈性布局最大的優點就是能充分利用螢幕空間。無論客戶端分辯率多大，都能自動適應寬度的變化。
圖一
其實做乙個彈性布局，相對來說是比較簡單的，但是這種布局雖簡單，可是對於細節上的把握才是這種布局的精髓。彈性布局雖說有這麼好的優點，可是卻有比較致命的缺陷：
1. 如果不對這種布局設定乙個最小寬度，當使用者縮小視窗到足夠小時，會對布局產生致命的影響。造成嚴重影響布局錯位。
2. 當乙個頁面彈性布局時，對於裡面的會產生巨大的影響。因為到目前為至，還沒有解決隨百分比縮放的問題。
一、解決最小寬度
一般彈性布局都是利用百分比來設定乙個容器的寬度。這樣就能自動適應螢幕的寬度了。但是寬度值不能完全由使用者自由縮放，我們必須在這個百分比寬度限制其最小寬度，當使用者縮小視窗到一定值，就不讓視窗再縮放了。
熟悉css的朋友都知道，有這樣四個屬性：
min-width:最小寬度
max-width:最大寬度
min-height:最小高度
max-height:最大高度
這四個屬性剛好能解決這個問題，是不是比較欣喜，可是，別忙，雖說它們能解決這個問題，可是卻有乙個嚴重的問題，使用者使用最多的瀏覽器ie6卻不支援這幾個屬性，這是一件非常糟糕的事情。我們總不能丟棄使用者最多的瀏覽器吧！
目前網上比較流行的有四種方法來解決讓ie6支援這四種屬性：
1. 在css中expression來設定最小寬度，比較費記憶體。
2. 用巢狀div,然後用margin偏移模仿實現，多冗餘結構。
3. 用jq框架實現，為乙個屬性加乙個js框架，有點不划算。
4. 用純js**實現。
前面三種都有劣勢，請各自選擇最合適的方法，我偏重於最後一種，這是國外的乙個牛人實現的，相關例子可以看這兒：
有了這個js檔案，你只需要在頭部呼叫這個js檔案就可以了。
ps:在演示模型中為了方便，我將這個js作為內部引用的方式呼叫，你們在實際應用中將這個js檔案新建為乙個js外部檔案，如下方式呼叫：
二、解決彈性
我們看看上面哪張，要做成彈性布局，就要解決頁頭的動態縮放。而這是一張，我們都知道是沒有辦法隨比例縮放的，該怎麼辦呢？
圖二
第一在容器中以背景定位的方式左上定位，而第二張片則右下定位，用兩個容器分裝兩張，內層的級別比外層級別高，它會浮動到第一張上蓋住它，當然這第二張要做成透明底色的png或gif，因為png-24位透明在ie6下不受支援，所以我們改成png-8位的透明，這樣雖說質量上有點影響，但可以保證在ie6中暢通無阻。
所以頁頭的結構層應該是如下的樣子：
<
div
id="header"
>
<
div
id="inhead"
>
<
p>
頁頭內容
p>
div>
div>
針對這樣的結構我們可以寫出如下的樣式：
外層樣式：
#header
內層樣式：
圖三
這樣，乙個彈性布局就算基本完成了。最終的效果如下圖所示：
圖四
後記：
最後不得不提的是，這種布局是有侷限性的，並不是每個網頁都能適合用這種方式來布局。因為流體彈性布局本身存在的缺陷。它不能用於設計得太過華麗、豐富的頁面，因為有些是沒有辦法做到象上圖哪樣伸縮的。我想正是因為這個原因，它限制了這種布局的廣泛流傳。
演示頁面：
自適應流體布局
自適應內容 為了解決這個問題，我們可以使用一項技巧使內容自適應特定範圍的解析度螢幕。幸運的是，我們可以利用上面的技術來保持我們的比例，然後增加該項技術以得到更好的可用性。自適應內容流動布局 大多數流動布局在解析度為800 600的螢幕中看起來很大很寬 高達1280px。但是，我們可以稍稍突破一下，針...
多列布局案例 流體布局
運用多列布局做出的效果 往後餘生 平淡是你 往後餘生 平淡是你 往後餘生 平淡是你 往後餘生 平淡是你 往後餘生 平淡是你 往後餘生 平淡是你 往後餘生 平淡是你 往後餘生 平淡是你 往後餘生 平淡是你 往後餘生 平淡是你 往後餘生 平淡是你 figcaption figure section bo...
flex布局（彈性布局）
flex是flexible box的縮寫，意為 彈性布局 用來為盒狀模型提供最大的靈活性。任何乙個容器都可以指定為flex布局。box行內元素也可以使用flex布局。boxwebkit核心的瀏覽器，必須加上 webkit字首。box注意，設為flex布局以後，子元素的float clear和vert...