Rails/CSS：如何制作不同宽度的图片库？答案

【问题标题】：Rails/CSS: How do I make a gallery of images of different widths?Rails/CSS：如何制作不同宽度的图片库？
【发布时间】：2013-10-09 03:30:19
【问题描述】：

我有许多相同高度但宽度不同的图像。我想要每张图片下方的文字说明。如何在 Rails（包括 CSS、jQuery、Ruby 等）中构建我的画廊，以便将多行图像整理在一起，从而在图像之间没有任何大空间？

现在，我正在使用具有固定列大小的 Bootstrap，因此浪费了很多空间。我希望每个图像包装器都缩小到其图像的宽度，并且图像成行，图像之间的空间很小。

我还需要在每张图片下方添加文字说明。包含每个图像和标题的包装器的宽度应等于标题宽度和图像宽度的最小值。

【问题讨论】：

【解决方案1】：

我会在你的包装 div 上使用 CSS float:left;。有一些类似这样的 CSS：

.row-div{height:325px;width:auto;}
.wrapper-div {float:left;height:320px;margin-right:5px;}
.inner-div{height:20px;margin-right:5px;}

但是你需要一些逻辑（我建议只在 javascript 中执行此操作）来确定（基于每个图像的宽度）何时将下一个图像放入新的 .row-div 以及何时把它放在同一行。所以你会想要动态地编写标记。

这是您想要执行此操作的一般方式，但如果没有更多信息，很难给出完整的解决方案。

【讨论】：