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



我有很多相同高度但宽度不同的图像。我想要每张图片下方的文本标题。如何在 Rails 中构建我的图库(包括.CSS、jQuery、Ruby 等),以便将一行行图像整理在一起,以便图像之间没有任何大空间?

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

我还需要在每张图片下方有一个文本标题。包含每个图像和标题的包装器的宽度应等于标题宽度和图像宽度的最小值。

我会在你的包装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以及何时将其放在同一行中。 因此,您可能希望动态编写标记。

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

最新更新