Question

我正在寻找一种垂直包装的好方法。我的目标是将一个复选框列表放入div中。我有按字母顺序排序的复选框，我希望列表从div的顶部流到底部，然后当它们到达底部时再次在新列中开始。现在，我可以通过将列表分成服务器端预定义大小的块，然后将其提供给我的html模板。但是当列表变得太长以至于你必须滚动时，事情会变得混乱。我希望强制它只能水平滚动。这不是那么容易，因为我把每个块放在一个漂浮的div中，所以white-space：nowrap似乎没有削减它。目前，我正在使用javascript计数列表块的数量并扩展中间容器的宽度（在div中用作视口但包含包含数据的div）。我想要一些看起来像这样的东西：

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

所以我猜我有两个问题：

有垂直包装列表的好方法吗？
当数据对于视口来说太大时，是否有一种强制水平滚动的好方法？

Answer 1

我会使用CSS3 columns。但是，到目前为止，只有WebKit（Safari，Chrome，...）和Gecko（Firefox，...）已实现它，您必须添加各自的供应商前缀（-moz-column-width:...; -webkit-column-width:...;）才能正常工作

如果IE 有来获取列，浮动的div可能是最好的方式。

Answer 2

我会说这个，但是......使用表格！

嗯，这不是最漂亮的方式，但它可以解决你的问题我想

Answer 3

我使用这个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() &lt;= $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，但我不会打扰。您的视口只需要一个具有固定高度/宽度的div和overflow-x：scroll;溢出-γ：隐藏

Answer 4

要管理视口的滚动，可以设置CSS溢出属性：

div#viewport{
  overflow: scroll;
  overflow-x: scroll; /* not sure if it's standard */
  height: 150px;
}

Answer 5

我最终使用了一点服务器端预处理。无论如何，这个网站和这个特定页面最终都需要进行大量的预处理，我不希望数据的大小变得太大。

HTML中的垂直包装

5 个答案: