我一直致力于使用Masonry / Isotope进行适当的流体布局。我一路上遇到了许多障碍，最后一个我无法解决。
我的目标是：
我开始查看这个问题：jQuery Isotope: Fluid setup like Beyonce's website only works after resizing window，但是虽然它可以解决这个直接问题，但它并不处理装订线和多个列。
我设法编辑了所选答案的jsfiddle来清理并扩展它：
（请原谅没有换行符，但是jsfiddle在列弄混乱的阴沟之间创建 。）
我成功地解决了问题＃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>的宽度，并且所有图像都会出现在一行中。
最终的问题：我怎样才能让它正常工作，以便我在三个列之间使用排水沟但完全对齐父元素的左右两列？我甚至试图浮动图像，但是同位素有一些奇怪的行为。
答案 0 :(得分：0)
啊哈！我似乎可以通过以下代码示例执行此操作：
http://jsfiddle.net/remus/4fYUb/
要启用装订线，我只需将outline: 10px solid white;添加到css。