jquery - rails/CSS : How do I make a gallery of images of different widths?

Question

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

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

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

Answer 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 以及何时把它放在同一行。因此，您可能希望动态编写标记。

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