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

Question

我有许多高度相同但宽度不同的图像。 我要在每个图像下方添加文字标题。 如何在Rails中构造图库（包括CSS，jQuery，Ruby等），以使图像行排列在一起，从而使图像之间没有大空间？

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

我还需要在每个图像下方添加一个文本标题。 包含每个图像和字幕的包装纸的宽度应等于字幕宽度和图像宽度的最小值。

Answer 1

我会使用CSS float:left; 在您的包装div上。 有一些与此类似的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中以及何时将其放入同一行。 因此，您需要动态编写标记。

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