我一直在努力与砌体/同位素一起工作以获取正确的流体布局。在此过程中，我遇到了许多麻烦，但最后一个我无法解决。
我的目标是：
启用流体同位素图像网格布局，以动态调整照片大小
使图像网格在窗口中水平居中
有一个不会导致右列缠绕的装订线，或者B）偏心显示
我开始看这个问题：jQuery Isotope: Fluid setup like Beyonce's website only works after resizing window，但是虽然可以解决当前的问题，但它不能处理装订线和多列。
我设法编辑了选定答案的jsfiddle来清理并扩展它：
http://jsfiddle.net/kwwMC/4/
（请原谅缺少换行符，但是jsfiddle在列之间创建了 ，弄乱了装订线）。
我已经成功地解决了问题1；通过创建一个具有设置宽度和margin: 0 auto;的父div可以轻松解决问题2。这给我们带来了问题3：
如果您使用css为每个<li>元素（例如margin-right: 10px; margin-bottom: 10px;或什至使用border的元素）添加填充或透明边框，则会遇到问题。突然右列换行到下一行！当然，这是预期的行为，人们希望可以通过将display: inline-block;应用于<li>元素（已完成）和white-space: nowrap;应用于父元素（已将其注释掉）来解决此问题。
不幸的是，如果启用了nowrap，则会产生以下问题：<ul>元素不遵守父<div>的宽度，并且所有图像都显示在一行中。
最终的问题：如何使它正常工作，以使三列之间有一条装订线，但与父元素的左右完全对齐？我什至尝试过浮动图像，但是同位素有一些奇怪的行为。
最佳答案
啊哈！看来我应该能够通过以下代码示例执行此操作：
http://jsfiddle.net/remus/4fYUb/
为了启用装订线，我只是在CSS中添加了outline: 10px solid white;。