jQuery Masonry/Isotope 流体布局，具有适当的排水沟且无包装

Question

我一直在努力使用 Masonry/Isotope 获得适当的流体布局。在此过程中我遇到了许多障碍，最后一个我无法解决。

我的目标是：

1. 启用可动态调整照片大小的流体同位素图像网格布局
2. 使图像网格在窗口中水平居中
3. 有一个不会导致右列 A) 换行或 B) 显示偏离中心的装订线

我开始研究这个问题：jQuery Isotope: Fluid setup like Beyonce's website only works after resizing window，虽然它可以解决这个直接问题，但它不能处理排水沟和多列。

我设法编辑了所选答案的 jsfiddle 以对其进行清理和扩展：

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

（请原谅缺少换行符，但 jsfiddle 在列之间创建 's 弄乱了排水沟）。

我已经成功地解决了问题 #1；问题 #2 可以通过创建具有设定宽度和margin: 0 auto; 的父 div 轻松完成；这给我们留下了问题 #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/

为了启用装订线，我只是在 css 中添加了outline: 10px solid white;。