Как установить содержание переполнения идти под вместо установки в одном ряду

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-го входа.

Answer 2

Например, если вы добавите в своем классе CSS:

. articleTeaserHolder 
{ 
    max-height:50px; 
    overflow:auto; 
} 

весь текст и изображения имеют максимальную-высоту в 50px и когда изображение текстовый имеют перелив больше содержания автоматического добавления