html - 如何将溢出内容设置在下面而不是放在一行中

Question

我设置了一个 XSL 文件:

<?xml version="1.0" encoding="UTF-8"?>
<xsl:stylesheet version="1.0" xmlns:xsl="http://www.w3.org/1999/XSL/Transform">
<xsl:template name="homeArticleThumb" match="/">
    <xsl:for-each select="Collection/Content">
        <div class="setTableCell vertAlignT">
            <div class="articleTeaserHolder">
                <div class="imgHolder">
                    <xsl:variable name="imageSrc" select="Html/root/NewsArticle/artThumb/img/@src" />
                    <xsl:variable name="imageId">
                        <xsl:text>NewsArticle_</xsl:text>
                        <xsl:value-of select="ID" />
                        <xsl:text>_image</xsl:text>
                    </xsl:variable>
                    <xsl:variable name="contentTitle" select="Html/root/NewsArticle/artTitle" />
                    <a href="{QuickLink}" title="{Html/root/NewsArticle/artTitle}">
                        <img id="{ $imageId }" class="imgArtThumb" title="{ $contentTitle }" alt="{ $contentTitle }" src="{ $imageSrc }" />
                    </a>
                </div>
                <div class="textHolder">
                    <div class="textHolderTop">
                        <a href="{QuickLink}" title="{Html/root/NewsArticle/artTitle}" class="defaultLinks setBold">
                            <xsl:value-of select="Html/root/NewsArticle/artTitle"/>
                        </a>
                    </div>
                    <div class="textHolderBottom">
                        <xsl:value-of select="Html/root/NewsArticle/artTeaser" />
                    </div>
                </div>
            </div>
        </div>
    </xsl:for-each>
</xsl:template>
</xsl:stylesheet>

CSS:

.setTableCell
{
    display: table-cell;
}
.imgHolder
{
    float: left;
    display: inline-block;
    width: 43%;
    height: 100%;
    padding: 1% 2% 0 0;
}
.vertAlignT
{
    vertical-align: top;
}
.textHolder
{
    float: left;
    display: inline-block;
    width: 55%;
    height: 100%;
}
.textHolderTop
{
    width: 100%;
    height: 48%;
    text-align: left;
    padding-bottom: 2%;
    overflow: hidden;
}
.textHolderBottom
{
    width: 100%;
    height: 46%;
    overflow: hidden;
    text-align: left;
    padding-top: 2%;
    padding-bottom: 2%;
}


@media only screen and (max-width: 820px) {
    .setTableCell {
        display: block;
    }
}

我使用这一行调用上面的 XSL:

<CMS:Collection ID="id123" runat="server" DefaultCollectionID="128" DisplayXslt="art.xsl" GetHtml="true" />

显示这个:

将来我可能需要向该集合中添加更多内容，而不是 4 篇文章，它可能是 6 篇或 7 篇，或者……尽可能多的文章。

如何修改 XLS 文件，使其始终每行显示两篇文章，然后转到下一行显示下两篇文章，再下一行显示下两篇文章，依此类推。

Answer 1

我修改了我的 XSL 文件如下:

<?xml version="1.0" encoding="utf-8"?>
<xsl:stylesheet version="1.0" xmlns:xsl="http://www.w3.org/1999/XSL/Transform">
    <xsl:template match="/Collection">
        <table class="serviceHolder hidOverflow">
            <xsl:for-each select="Content[position() mod 2=1]">
            <xsl:variable name = "current-pos" select="(position()-1) * 2+1"/>
            <tr class="section group vertAlignT">
            <xsl:for-each select="../Content[position()&gt;=$current-pos and position() &lt; $current-pos+2]" >
                <td class="col span_half">
                    <table>
                        <tr class="section group vertAlignT">
                            <td class="col span_1_of_3 span_pad_right vertAlignT">
                                <xsl:variable name="imageSrc" select="Html/root/NewsArticle/artThumb/img/@src" />
                                <xsl:variable name="imageId">
                                    <xsl:text>NewsArticle_</xsl:text>
                                    <xsl:value-of select="ID" />
                                    <xsl:text>_image</xsl:text>
                                </xsl:variable>
                                <xsl:variable name="contentTitle" select="Html/root/NewsArticle/artTitle" />
                                <a href="{QuickLink}" title="{Html/root/NewsArticle/artTitle}">
                                    <img id="{ $imageId }" class="imgArtThumb" title="{ $contentTitle }" alt="{ $contentTitle }" src="{ $imageSrc }" />
                                </a>                            
                            </td>
                            <td class="col span_2_of_3 span_pad_left vertAlignT">
                                <table>
                                    <tr>
                                        <td>
                                            <a href="{QuickLink}" title="{Html/root/NewsArticle/artTitle}" class="defaultLinks setBold">
                                                <xsl:value-of select="Html/root/NewsArticle/artTitle"/>
                                            </a>
                                        </td>
                                    </tr>
                                    <tr>
                                        <td><xsl:value-of select="Html/root/NewsArticle/artTeaser" /></td>
                                    </tr>
                                </table>                            
                            </td>
                        </tr>
                    </table>
                </td>
            </xsl:for-each>
            </tr>           
           </xsl:for-each>         
        </table>
    </xsl:template>
</xsl:stylesheet>

我使用 position() mod 2=1 在每 2 个条目后休息。