網格狀文章佈局

我正在使用WP 3.5.1 ATM。我的目標是製作寬度爲300px的文章，然後將它們浮動到左側，然後將這些行直接堆疊在垂直水平對齊的垂直下方。我遇到的問題是，當它到達第二行時，它不會垂直排列在第一行的下方，而是水平排列。這有時會在第一排和第二排之間留下巨大的垂直差距，如果第一排的一篇文章很長，而其他文章很短。網格狀文章佈局

我從來沒有嘗試過這種佈局，所以我想知道如果我可以從那些得到一些指針。我怎樣才能做到這一點？或者也許是一個教程網站？我GOOGLE了它，但沒有找到任何關於該方法。我的目標

例子是mysocialcloud.com，new.myspace.com，so.cl，而這一次，特別是：http://www.eleventhemes.com/gridly/

感謝。

來源

2013-03-17 Xarcell

也許這應該有幫助... http：//welcome.totheinter.net/columnizer-jquery-plugin/ – PSL 2013-03-17 18:23:59

發佈您的代碼！和一個JSFiddle：http://jsfiddle.net – user2019515 2013-03-17 18:34:45

或者，如果您正在尋找提供更好的跨瀏覽器兼容性的基於JS的方法，請嘗試jQuery Masonry。

浮動你的元素按照正常，但砌體將然後重新定位您的元素根據可用空間的絕對定位。

來源

2013-03-17 19:24:31 Terry

我將看看它。謝謝。 – Xarcell 2013-03-17 21:12:44

我嘗試這樣做，很喜歡這個更好的解決方案。謝謝！ – Xarcell 2013-03-18 01:13:14

如果你樂於使用CSS3那麼你可以用所有內容在一個div，然後使用列CSS：

-moz-column-count: 3; 
-moz-column-gap: 1em; 
-webkit-column-count: 3; 
-webkit-column-gap: 1em; 
column-count: 3; 
column-gap: 1em;

我已經做了小提琴http://jsfiddle.net/DVfGP。

我創建了一個div與列css然後div來包含每個元素。我將下面的CSS應用於元素：

display: inline-block; 
width: 100%;

這會將所有元素保留在同一列中。希望那是你以後的樣子。

來源

2013-03-17 18:43:47 Martyn0627

CSS列是我需要的，並且運作良好。瀏覽器支持是一個問題，但我並不在乎。 – Xarcell 2013-03-17 19:20:06

我知道這感覺大聲笑 – Martyn0627 2013-03-17 19:20:58

雖然我注意到一個奇怪的效果。文章正在被切斷（例如，元素內的內容正在被切割並放入下一列）。這是正常的行爲嗎？ – Xarcell 2013-03-17 19:23:05

網格狀文章佈局

回答

相關問題