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

Question

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

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

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

Answer 1

我会float:left;在你的包装 div 上使用 CSS。有一些类似于这样的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 以及何时将其放入同一行。所以你会想要动态地编写标记。

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