如何设置溢出内容到下面而不是排成一排 [英] How to set overflow content to go underneath instead of fitting in one row

问题描述

我已经设置了XSL文件:

I have an XSL file set up:

<?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:

I call the above XSL using this line:

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

显示此:

将来，我可能需要向该收藏中添加更多内容，因此可能不是6篇或7篇，而是4篇文章，而不是4篇文章.

In the future I might need to add more contents to that collection so instead of 4 articles it might be 6 or 7 or... as many number of articles.

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

How can I modify the XLS file so that it will always display two article per row and go to the next row for the next two and next row for the next two and so forth.

推荐答案

我按如下所示修改了XSL文件:

I modified my XSL file as follow:

<?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在每第二个条目之后放一个空格.

I use the position() mod 2=1 to put a break after every 2nd entry.

这篇关于如何设置溢出内容到下面而不是排成一排的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！