程序代碼
function dynamicLayout(){ var browserWidth = getBrowserWidth(); // Narrow CSS rules if (browserWidth <>= 640) && (browserWidth <= 960)){ changeLayout("default"); } // Wide CSS rules if (browserWidth > 960){ changeLayout("wide"); }}這種技術很容易實現，能夠與其它技術一起創建更多的可用性佈局。仔細查看js，可以看到更多細節。相似的技術對於類似的技術，可以參閱 Brand Spanking New 的 Dynamic layouts with adaptive columns，他使用了大致相同的代碼，但略微不同，幸好有更多的選擇和腳本實例得到同樣的自適應內容。要下載此版本自適應內容的腳本，請到 Dynamic layouts with adaptive columns。這種概念並不難，關於此技術每個開發者都有自己的腳本，Clagnut.com博客的回帖中有更多關於自適應內容的佈局和腳本－－Variable fixed width layout，在其回帖中甚至有一種技巧無需任何腳本－－CSS Drop Column Layout。三、 流動佈局中的圖像在流動佈局中開發者最關心的是處理圖像和內容，它們需要一定的寬度。大多數情況下，我們希望我們的圖像盡可能的大，至少在太小時應防止任何令人尷尬的空白，在固定寬度的佈局中，可手動調整，客服這些問題很容易。但是，在流動佈局中，圖像區域的寬度是不斷變化的，這些問題就在此出現了。自動雜誌版面設計這個解決方案需要一些聰明的數學知識和PHP，在Harvey Kane 的 Automatic Magazine Layout 文章中有全面的解釋（包括數學）和可下載的源代碼。標題由圖像在雜誌中如何呈現來決定：有條理且總是完美對齊。當然，一本雜誌版面的設計師都必須經過一定的過程來實現這種效果，包括調整和手動放置。對我們來說，這一技巧可以實現我們的效果，下面是腳本實現這一效果的第一個例子。正如你所看到的那樣，非常漂亮。但是，如何使用流動佈局使其更具可用性？Harvey Kane 給了我們必須使用的腳本。
程序代碼
# include the class filerequire_once('magazinelayout.class.php');# Define the width for the output area (pixels)$width = 600;# Define padding around each image; this *must* be included#in your style sheet (pixels)$padding = 3;# Define your template for outputting images# (Don't forget to escape the &)$template = '';# create a new instance of the class$mag = new magazinelayout($width,$padding,$template);# Add the images in any order$mag->addImage( 'landscape1.jpg' );$mag->addImage( 'portrait1.jpg' );$mag->addImage( 'landscape2.jpg' );# display the outputecho $mag->getHtml();我們可以事先定義我們所希望的圖像雜誌的寬度。因此，如果我們找到瀏覽器的寬度，我們就可以決定我們佈局圖像的寬度，這很容易。因為我們已經學會了第二種技巧：自適應內容的流動佈局。在他的腳本中，Kevin Hale使用了一個稱之為getBrowserWidth() 的方法，你可以在他的文章中更深入的瞭解該方法的代碼。如果我們用這種方法取代瀏覽器的寬度值，然後用這個值去尋找我們內容區域的像素寬度（不論圖像放在那個區域）。比方說，我們希望將圖像放到70%的內容區域中，利用簡單的數學知識，我們只需要找到瀏覽器寬度值的70%就行。
程序代碼
Pixel width = 內容區域百分比 x 瀏覽器寬度 $width = 0.70 x getBrowserWidth();這是很基本的數學知識，是流動佈局中處理圖像最基本的方法，調整PHP腳本自動尋找圖像的像素值。這樣，在一個流動佈局中，你就能很好的處理圖像或其餘已經設置寬度的內容。四、jQuery圬工不去考慮不斷改變屏幕分辨率時css中的存在的許多問題。倒有一個共同的問題是許多設計師更可能面臨的－－多重內容盒子。當有許多浮動元素時，一些尷尬的空白會出現在高度變換的區域之間，下面是這方面的一個例子：如果我們打算在一個固定寬度的佈局中使用多個div，固定很容易：只需調整所有div在合適的位置就行，在流動設計中用這種方式處理多個divs似乎不可能。佈局的每一次調整，在新的點上將出現不同數量的空白。在較小分辨率下查看相同的佈局，佈局變成了兩欄。但是，在這種情況下，我們得了不同的空白。任何設計師覺得這是一個尷尬的問題。通常情況下，因為沒有可行方案解決此問題，這種佈局被強行設置成固定寬度。幸運的是，這個問題不是不可能解決，而是相當容易－－源於 David DeSandro's jQuery Plugin: jQuery Masonry 提供的方法。jQuery圬工是什麼？ jQuery圬工是一個非常容易使用的插件，用David DeSandro 自己的話說：「將jQuery看作css浮動的對立面，浮動元素的排列是先橫向後縱向，圬工排列是先縱向後橫向，其結果是在高度變換元素的垂直方向上沒有間隙，就像是一座石頭強。」如何使用jQuery masonry在上面的例子中，所有盒子被放置在 ID為「item」的段落之中，「item」設置了30%的寬度，並向左浮動，所有這些放置在寬度為90%的# wrapper中，一旦段落的寬度達到#wrapper的寬度，無論是否有空白留下，它將新起一行。下載 jQuery Masonry 插件，並對#wrapper應用masonry()方法，就很容易修復它。$('#wrapper').masonry();下面兩張圖片顯示了該插件的力量。第一個是在大分辨率屏幕上的佈局情況，第二個是同樣的佈局，在小分辨率屏幕中查看，它折疊成了兩欄。該插件的一個bug和一個修復方法使用該插件，如果用戶縮放瀏覽器，你會注意到div層保持在原來的位置，但是刷新後，它有完好。但用戶不知道需要書信去修復該問題。因此，按下面的方法改變html代碼將很容易的修復該問題。
';# create a new instance of the class$mag = new magazinelayout($width,$padding,$template);# Add the images in any order$mag->addImage( 'landscape1.jpg' );$mag->addImage( 'portrait1.jpg' );$mag->addImage( 'landscape2.jpg' );# display the outputecho $mag->getHtml();我們可以事先定義我們所希望的圖像雜誌的寬度。因此，如果我們找到瀏覽器的寬度，我們就可以決定我們佈局圖像的寬度，這很容易。因為我們已經學會了第二種技巧：自適應內容的流動佈局。在他的腳本中，Kevin Hale使用了一個稱之為getBrowserWidth() 的方法，你可以在他的文章中更深入的瞭解該方法的代碼。如果我們用這種方法取代瀏覽器的寬度值，然後用這個值去尋找我們內容區域的像素寬度（不論圖像放在那個區域）。比方說，我們希望將圖像放到70%的內容區域中，利用簡單的數學知識，我們只需要找到瀏覽器寬度值的70%就行。
