我一直在努力使用 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>
的宽度,并且所有图像都出现在一行中。
最终的问题:我怎样才能让它正常工作,以便我有三列在中间有一个排水沟,但与父元素的左右完全对齐?我什至尝试过浮动图像,但是同位素有一些奇怪的行为。