在HTML中垂直包装
我正在寻找一种垂直包装的好方法。 我的目标是将复选框列表放入div中。 我有复选框按字母顺序排序，我希望列表从顶部流到底部，然后在新列到达底部时重新开始。 现在，我可以通过在服务器端将列表分成预定义大小的块，然后将其提供到我的html模板中。 但是，当列表变得很长以至于你不得不滚动时，事情会变得很混乱。 我希望强制它只能水平滚动。 这并不容易，因为我将每个块都保存在一个浮动div中，所以white-space：nowrap似乎不会削减它。 目前，我使用javascript计算列表块的数量并扩展中间容器的宽度（在作为视口的div的内部，但包含包含数据的div）。 我想要的东西大概是这样的：
__________________________
| []..... []..... []..... |
| []..... []..... []..... |
| []..... []..... |
| []..... []..... |
|__________________________|
|<|_____________|___||___|>|
所以我想我有两个问题：
我会使用CSS3列。 但是，到目前为止，只有WebKit（Safari，Chrome，...）和Gecko（Firefox，...）已经实现了它，并且您必须添加它们各自的供应商前缀（ -moz-column-width:...; -webkit-column-width:...; ）使其工作。
如果IE必须获得列，浮动div可能是最好的方式。
我会因为说这个而陷入低谷，但是......用桌子 ！
那么这不是最漂亮的方式，但它可以解决你的问题，我猜
我使用这块Xsl来生成一个固定行数的表格： -
<?xml version="1.0" encoding="UTF-8" ?>
<xsl:stylesheet version="1.0" xmlns:xsl="http://www.w3.org/1999/XSL/Transform">
<xsl:output method="html" encoding="UTF-8" />
<xsl:variable name="rowCount" select="6" />
<xsl:template match="/*">
<table rules="all">
<xsl:for-each select="item[position() <= $rowCount]">
<tr>
<xsl:for-each select=". | following-sibling::item[position() mod $rowCount = 0]">
<td><xsl:value-of select="." /></td>
</xsl:for-each>
</tr>
</xsl:for-each>
</table>
</xsl:template>
</xsl:stylesheet>
您可以用参数替换rowCount变量。 所有你需要计算的视图端口的垂直客户端高度需要多少行（记住你松动了一些水平滚动条出现时，我会让它始终可见）。
这可以适应一组浮动div，但我不打扰。 您的视口只需要具有固定高度/宽度和overflow-x：scroll的div; 溢出-Y：隐藏。
链接地址: http://www.djcxy.com/p/42239.html