我正在寻找一种垂直包装的好方法.我的目标是将一个复选框列表放入div中.我有按字母顺序排序的复选框,我希望列表从div的顶部流到底部,然后当它们到达底部时再次在新列中开始.现在,我可以通过将列表分成服务器端预定义大小的块,然后将其提供给我的html模板.但是当列表变得太长以至于你必须滚动时,事情会变得混乱.我希望强制它只能水平滚动.这不是那么容易,因为我把每个块放在一个漂浮的div中,所以white-space:nowrap似乎没有削减它.目前,我正在使用
javascript计数列表块的数量并扩展中间容器的宽度(在div中用作视口但包含包含数据的div).我想要一些看起来像这样的东西:
__________________________ | []..... []..... []..... | | []..... []..... []..... | | []..... []..... | | []..... []..... | |__________________________| |<|_____________|___||___|>|
所以我想我有两个问题:
解决方法
我使用
CSS3 columns.但是到目前为止,只有WebKit(Safari,Chrome,…)和Gecko(Firefox,…)实现了它,你必须添加它们各自的供应商前缀(-moz-column) -width:…; -webkit-column-width:…;)让它工作.