Question

假设我的Rails 3应用返回li代码列表。想象一下图片库，其中每个li标签都包含一个小图片。

我想要做的是确定屏幕的宽度，然后在我向下移动到下一行之前只显示5-7张图像。

例如，假设我有一台宽屏显示器：

IMG1 IMG2 IMG3 IMG4 IMG5 IMG6 IMG7
IMG8 IMG9 ...

但是在较小的显示器上，我想要：

IMG1 IMG2 IMG3 IMG4 IMG5
IMG6 IMG7 IMG8 IMG9 ...

也许JavaScript不是最好的方法。在Rails中编写一些方法会更好吗？

感谢您的任何建议。

Answer 1

你应该只使用CSS来解决这个问题。使LI浮动：向左，它们适应可用空间。

Answer 2

仅使用CSS，您可以将<li>元素设置为display: inline，然后使用相对宽度（百分比）使它们填充空间。要更改每行的元素数量，@media查询将有所帮助：

li {
    display: inline;
}

@media (max-width: 400px) {
    li {
        width : 33%;  /* three per line */
    }
}
@media (max-width: 600px) {
    li {
        width : 25%; /* 4 */
    }
}
@media (min-width: 1000px) {
    li { 
        width : 20%;
    }
}

你将需要重置其他样式以使其正常工作（删除填充等），但这可能是一个好的开始。

Answer 3

您可以轻松地使用CSS，将所有元素设置为显示：内联; 将它们全部放入基于百分比的宽度（或仅使用整个宽度）

如何用JavaScript划分LI的列表？

3 个答案: