我一直在努力使用 Masonry/Isotope 获得适当的流体布局。在此过程中我遇到了许多障碍，最后一个我无法解决。
我的目标是：
- 启用可动态调整照片大小的流体同位素图像网格布局
- 使图像网格在窗口中水平居中
- 有一个不会导致右列 A) 换行或 B) 显示偏离中心的排水沟
我开始研究这个问题：jQuery Isotope: Fluid setup like Beyonce's website only works after resizing window，但是虽然它可以解决眼前的问题，但它不能处理排水沟和多列。
我设法编辑所选答案的 jsfiddle 以清理并扩展它：
（请原谅缺少换行符，但 jsfiddle 在列之间创建 's 弄乱了排水沟）。
我已经成功地解决了问题#1；问题 #2 可以通过创建具有设置宽度的父 div 和margin: 0 auto;; 这给我们留下了问题#3：
如果您使用 css 为每个<li>元素添加填充或透明边框（例如，margin-right: 10px; margin-bottom: 10px;甚至等效的 using border），我们就会遇到问题。突然间，右列换成了下一行！当然，这是预期的行为，人们希望通过将其应用于元素（我已经完成）和父元素（我已注释掉）来display: inline-block;解决<li>它white-space: nowrap;。
不幸的是，如果您启用 nowrap，它会产生问题行为，即<ul>元素不遵守 parent<div>的宽度，并且所有图像都出现在一行中。
最终的问题：我怎样才能让它正常工作，以便我有三列在中间有一个排水沟，但与父元素的左右完全对齐？我什至尝试过浮动图像，但是同位素有一些奇怪的行为。