javascript - HTML 中的垂直环绕

Question

我正在寻找一种进行垂直环绕的好方法。我的目标是将复选框列表放入一个 div 中。我将复选框按字母顺序排序，我希望列表从 div 的顶部流到底部，然后在它们到达底部时在新列中再次开始。现在，我可以通过在将列表输入我的 html 模板之前在服务器端将列表分成预定义大小的 block 来做到这一点。但是当列表变得太长以至于你不得不滚动时，事情就会变得一团糟。我希望强制它只水平滚动。这不是那么容易，因为我将每个 block 都放在一个 float 的 div 中，所以 white-space:nowrap 似乎并没有削减它。目前，我正在使用 javascript 计算列表 block 的数量并扩展中间容器的宽度(在用作视口(viewport)但包含包含数据的 div 的 div 内)。我想要大致如下所示的内容:

 __________________________
| []..... []..... [].....  |
| []..... []..... [].....  |
| []..... [].....          |
| []..... [].....          |
|__________________________|
|<|_____________|___||___|>|

所以我想我有两个问题:

1. 有没有一种垂直环绕列表的好方法？
2. 当数据对于视口(viewport)而言太大时，是否有强制水平滚动的好方法？

Answer 1

我会使用 CSS3 columns .但是，到目前为止，只有 WebKit(Safari、Chrome、...)和 Gecko(Firefox、...)实现了它，您必须添加它们各自的 vendor 前缀(-moz-column-width: ...; -webkit-column-width:...;) 让它工作。

如果 IE 必须获取列， float div 可能是最好的方法。