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以及何时把它放在同一行。所以你想要动态地编写标记。

这是您想要这样做的一般方式，但如果没有更多信息，很难提供完整的解决方案。