articleDisplayThumb XSLT-Datei (Verwenden Sie dasDynamicParameter ID, um die Sammlung zu durchsuchen):

<?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="col span_1_of_3" style="height: 150px; border: 1px solid black;">
      <div class="test2">
        <div style="float: left; width: 28% padding-right: 2%; height: 100%;">
          {DISPLAY THE IMAGE HERE AND MAKE IT LINK TO THE ARTICLE} --> artThumbImg

        </div>
        <div style="float: left; width: 58%; height: 100%;">
          <div style="width: 100%; height: 48%; padding-bottom: 2%;">
            {DISPLAY THE TITLE AND LINK HERE} --> artTitle

          </div>
          <div style="width: 100%; height: 48%; overflow: hidden; text-overflow: ellipses; white-space: nowrap;">
            {DISPLAY THE TEXT WITH "..." Here} --> partial artText (a Teaser...)

          </div>
        </div>
      </div>
    </div>
  </xsl:for-each>
</xsl:template>
</xsl:stylesheet>

CSS für die oben genannten Klassen (ich versuche, es an die Bildschirmgröße anzupassen, indem ich das folgende Beispiel verwende:http: //jsfiddle.net/Lry4z15m/2):

/*  COLUMN SETUP  */
.col {
    display: block;
    /*float:left;*/
    display: inline-block;
    margin: 1% 0 1% 0;
}
.col:first-child {
    margin-left: 0;
}


/*  GROUPING  */
.group:before, .group:after {
    content: "";
    display: table;
}
.group:after {
    clear: both;
}
.group {
    zoom: 1; /* For IE 6/7 */
}

/*  GRID OF THREE  */
.span_3_of_3 {
    width: 100%;
}
.span_2_of_3 {
    width: 66.1%;
}
.span_1_of_3 {
    width: 32.2%;
}

/*  GO FULL WIDTH AT LESS THAN 480 PIXELS */

@media only screen and (max-width: 480px) {
    .col { 
        margin: 1% 0 1% 0%;
    }
}

@media only screen and (max-width: 480px) {
    .span_3_of_3 {
        width: 100%; 
    }
    .span_2_of_3 {
        width: 100%; 
    }
    .span_1_of_3 {
        width: 98%;
    }
}

Ich rufe das oben genannte von meiner ASP.net-Seite wie folgt auf:

<CMS:ContentBlock ID="CB" runat="server" DynamicParameter="127" CssClass="setP" DisplayXslt="Workarea/CustomFiles/articleDisplayThumb.xsl" />

Die Sammlung mit ID127 sieht so aus (Der Link für den Titel muss ungefähr so aussehen:mypage?linkit={ID} bei dem dieID ist für jeden angeklickten Artikel:

Was ich möchte, dass es so endet (Das Bild links istartThumb, das Blau ist dasartTitle und das Schwarze ist dasartText):

Die XPaths:

Wie kann ich das XSLT vervollständigen, um das Endergebnis mit dem gleichen Stil wie in JSFiddle zu erzielen?

AKTUALISIEREN

Habe das bisher gemacht ...

<?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="col span_1_of_3" style="height: 150px; border: 1px solid black;">
      <div class="test2">
        <div style="float: left; width: 28% padding-right: 2%; height: 100%;">
          <xsl-copy-of select="/root/NewArticle/artThumb" />
        </div>
        <div style="float: left; width: 58%; height: 100%;">
          <div style="width: 100%; height: 48%; padding-bottom: 2%; text-align: left;">
            <a href=""><xsl:value-of select="/root/NewArticle/artTitle" /></a>

          </div>
          <div style="width: 100%; height: 48%; overflow: hidden; text-overflow: ellipses; white-space: nowrap; text-align: left">
            <xsl:value-of select="/root/NewArticle/artText" />

          </div>
        </div>
      </div>
    </div>
  </xsl:for-each>
</xsl:template>
</xsl:stylesheet>