Javascript HTML中的垂直换行

我正在寻找一种做垂直缠绕的好方法。我的目标是将复选框列表放入一个div中。我将复选框按字母顺序排序，我希望列表从div的顶部流向底部，然后在到达底部时在新列中重新开始。现在，我可以通过在服务器端将列表分解成预定义大小的块，然后再将其输入html模板来实现这一点。但是当列表太长以至于你不得不滚动时，事情就会变得一团糟。我希望强制它只水平滚动。这并不是那么容易，因为我把每一块都放在一个浮动的div中，所以空格：nowrap似乎并没有切掉它。目前，我正在使用javascript计算列表块的数量并扩展中间容器的宽度（在用作视口的div内，但包含包含数据的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() &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-x:scroll；溢出y：隐藏。

我会使用。但是，到目前为止，只有WebKit（Safari、Chrome等）和Gecko（Firefox等）实现了它，您必须添加它们各自的供应商前缀（

-moz列宽：…；-WebKit列宽：…；

）才能使其工作

---

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

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

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

---

最后我使用了一点服务器端预处理。这个网站，以及这个特定的页面，最终需要进行大量的预处理，我不希望数据太大。

这不是你想要的，但请检查以下内容：@Malfist:你的权利还没有接近。@Malfist:你有权发表你的意见，你有权投票。允许其他人拥有他们的。@Malfist:这会起作用的，你只需要做一些预处理就可以得到行/列。Css没有一个可靠的方法来完成这项工作。@Malfist:它不会包装，但可以解决问题。我想这是我答案中最重要的部分。否则，我不会只为了好玩而回答毫无意义的问题。@EverybodyHoisnotMalfist:使用表格如何简化任何事情？如果他必须通过编程生成一个表（即，他正在手动“包装”），那么他可以同样轻松地使用div构建标记。顺便说一句，我没有投票赞成或反对这一点。我只是觉得不应该投票赞成。这是不正确的，我不会投赞成票。但这并不是粗鲁的、无益的或广泛不准确的，所以我也不想投反对票。