HTML中的垂直换行

CSS3 columns . 然而,到目前为止,只有WebKit(Safari,Chrome,…)和Gecko(Firefox,…)实现了它,您必须添加它们各自的供应商前缀( -moz-column-width:...; -webkit-column-width:...;

如果IE 有

我说这句话会被否决的,但是。。。使用 桌子 !

这不是最漂亮的方法,但我想它可以解决你的问题

<?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:隐藏。

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

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