jQuery砌體/同位素流體佈局與適當的天溝和沒有包裝

Question

我一直在努力獲得適當的流體佈局與砌體/同位素工作。我一路上碰到了一些障礙，最後一個我一直無法解決。

我的目標是：

1. 啓用該調整大小的飛行
2. 有圖像框格在窗口水平居中的照片流體同位素圖像的網格佈局
3. 有沒有按」排水溝t引起右列A）包裹，或B）顯示偏離中心

我開始看這個問題：jQuery Isotope: Fluid setup like Beyonce's website only works after resizing window，但它可以解決這個直接的問題，但它不處理排水溝和多列。

我設法編輯所選答案的的jsfiddle把它清理乾淨，並展開：

http://jsfiddle.net/kwwMC/4/

（請原諒缺乏換行符，但的jsfiddle被列之間創建 的搞亂排水溝）。

我已經成功解決了問題＃1;問題＃2可以通過創建一個具有設置寬度的父div來輕鬆完成，並且margin: 0 auto;;這給我們留下了問題＃3：

如果您使用CSS來填充或透明邊框添加到每個<li>元素（比如，margin-right: 10px; margin-bottom: 10px;甚至等同使用border），我們遇到了問題。突然之間，右欄回到了下一行！這當然是預期的行爲，只要將display: inline-block;應用到<li>元素（我已經完成）和white-space: nowrap;（我已註釋掉），就可以解決這個問題。

不幸的是，如果啓用了nowrap，它會產生<ul>元素不遵守父級<div>寬度的問題行爲，並且所有圖像都顯示在一行中。

最終的問題：我怎樣才能使這個工作正常，以便我有三列工作與之間的排水溝，但完全對齊父元素的左側和右側？我甚至試圖漂浮圖像，但隨後有一些奇怪的同位素行爲。

Answer 1

啊哈！看來，我應該可以通過下面的代碼示例來做到這一點：

http://jsfiddle.net/remus/4fYUb/

要啓用陰溝裏，我只是簡單地添加outline: 10px solid white;的CSS。