不去考慮不斷改變屏幕分辨率時css中的存在的許多問題。倒有一個共同的問題是許多設(shè)計師更可能面臨的--多重內(nèi)容盒子。當(dāng)有許多浮動元素時，一些尷尬的空白會出現(xiàn)在高度變換的區(qū)域之間，下面是這方面的一個例子：

　　如果我們打算在一個固定寬度的布局中使用多個div，固定很容易：只需調(diào)整所有div在合適的位置就行，在流動設(shè)計中用這種方式處理多個divs似乎不可能。布局的每一次調(diào)整，在新的點上將出現(xiàn)不同數(shù)量的空白。

　　在較小分辨率下查看相同的布局，布局變成了兩欄。但是，在這種情況下，我們得了不同的空白。任何設(shè)計師覺得這是一個尷尬的問題。通常情況下，因為沒有可行方案解決此問題，這種布局被強行設(shè)置成固定寬度。

　　幸運的是，這個問題不是不可能解決，而是相當(dāng)容易--源于 David DeSandro’s jQuery Plugin: jQuery Masonry 提供的方法。

　　jQuery圬工是什么?

　　jQuery圬工是一個非常容易使用的插件，用David DeSandro 自己的話說：“將jQuery看作css浮動的對立面，浮動元素的排列是先橫向后縱向，圬工排列是先縱向后橫向，其結(jié)果是在高度變換元素的垂直方向上沒有間隙，就像是一座石頭強。”

　　如何使用jQuery masonry

　　在上面的例子中，所有盒子被放置在 ID為“item”的段落之中，“item”設(shè)置了30%的寬度，并向左浮動，所有這些放置在寬度為90%的# wrapper中，一旦段落的寬度達到#wrapper的寬度，無論是否有空白留下，它將新起一行。

　　下載 jQuery Masonry 插件，并對#wrapper應(yīng)用masonry()方法，就很容易修復(fù)它。

　　$('#wrapper').masonry();

　　下面兩張圖片顯示了該插件的力量。第一個是在大分辨率屏幕上的布局情況，第二個是同樣的布局，在小分辨率屏幕中查看，它折疊成了兩欄。

　　該插件的一個bug和一個修復(fù)方法

　　使用該插件，如果用戶縮放瀏覽器，你會注意到div層保持在原來的位置，但是刷新后，它有完好。但用戶不知道需要書信去修復(fù)該問題。因此，按下面的方法改變html代碼將很容易的修復(fù)該問題。

　　現(xiàn)在，用戶每次改變?yōu)g覽器的大小，瀏覽器會自動刷新并重載整個腳本。

最新評論