Horizontale Ausrichtung im Repeater-Steuerelement

Question

Ich habe ein Repeater-Steuerelement, das zum Anzeigen hochgeladener Bilder verwendet wird.

Wie kann ich die Bilder im Repeater horizontal anzeigen? Wie kann ich die Bildunterschrift hier unten angeben?

Answer 1

vorausgesetzt, Sie haben einige Code wie folgt:

<asp:repeater ...> 

</asp:repeater> 

injizieren nur "<itemtemplate>" mit etwas HTML-Code, mit dem Aussehen und fühlen Sie sich zu wollen. Es ist nicht besonders wichtig, horizontal oder vertikal zu zeigen, es hängt nur davon ab, welche HTML-Tags Sie in den Artikelvorlagen verwenden.

Answer 2

Wenn Sie vor allem keine Repeater müssen dies tun, können Sie eine Datalist verwenden statt und stellen Sie die RepeatDirection="Horizontal"

Answer 3

davon abhängt, was Sie anzeigen verwenden, das heißt, wenn Sie Ihre Bilder sind in einem div float:left; setzen oder verwenden Sie die DataList.

Answer 4

Sie Ihre ItemTemplate bauen können wie:

<ItemTemplate> 
    <div class="floating"> 
     <img src='<%# /* Code to Eval your image src from datasource */ %>' alt='' /> 
     <span><%# /* Code to Eval your image caption from datasource */ %></span> 
    </div> 
</ItemTemplate> 

wo die .floating Klasse des div ist:

.floating { float:left; overflow:hidden; } 
.floating img { display: block; } 

ich in der Regel ein div für eine klare Führung bringen ein Sequenzelement des Schwebens, zu Setzen Sie den Status des Boxmodells zurück.

<div style="clear:both;"></div> 

Answer 5

wie nach jeder Zeile

<asp:DataList ID="dlstmovie" runat="server" onitemcommand="dlstmovie_ItemCommand" RepeatColumns="5" ItemStyle-CssClass="item1" RepeatDirection="Horizontal" onitemdatabound="dlstmovie_ItemDataBound" > 
    <ItemTemplate> 
     <asp:LinkButton ID="lnkimg" runat="server" CommandName="m1" CommandArgument='<%# DataBinder.Eval(Container.DataItem,"cinemaid")%>'> 
      <img src='<%=cinemaposter %><%#Eval("picturenm")%>' class="img" /> 
     </asp:LinkButton> 
     <br /> 

     <asp:LinkButton ID="lnkmovie" runat="server" CommandName="m1" CommandArgument='<%# DataBinder.Eval(Container.DataItem,"cinemaid")%>' Text='<%#(Eval("cinemanm").ToString().Length>10)?(Eval("cinemanm").ToString().Substring(0,10))+"":Eval("cinemanm").ToString()%>' CssClass="blacktext"></asp:LinkButton> 
     <asp:LinkButton ID="LinkButton1" runat="server" CommandName="m1" CommandArgument ='<%#DataBinder.Eval(Container.DataItem,"cinemaid")%>' Font-Underline="false" CssClass="blacktext">...</asp:LinkButton> 

    </ItemTemplate> 
    <FooterTemplate> 
     <asp:Label ID="lblEmptyData" Text="No Data To Display" runat="server" Visible="false" CssClass="blacktext"> 
     </asp:Label> 
    </FooterTemplate> 
</asp:DataList> 

Answer 6

horizontale Linie angezeigt Wie @numenor in this other answer gesagt, es ist nur eine Frage dessen, was html Sie verwenden. Hier ein Beispiel, wie Sie mit HTML-Tabellen arbeiten können.

<table width="<%= this.TotalWidth %>"> 
    <tr> 
     <asp:Repeater runat="server" ID="rptABC" OnItemDataBound="rptABC_ItemDataBound"> 
      <ItemTemplate> 
       <td class="itemWidth"> 
        Your item goes here and will be 
        displayed horizontally as a column. 
       </td> 
      </ItemTemplate> 
     </asp:Repeater> 
    </tr> 
</table> 

anzumerken, dass die Breite mit einer Server-Seite Eigenschaft behandelt wird TotalWidth dass die Gesamtbreite basierend auf benötigt berechnet, wird natürlich die Anzahl der Elemente Repeater anzuzeigen. Das Erstellen einer CSS-Klasse zum Definieren der Breite jedes Elements wird ebenfalls empfohlen, um ein korrektes Layout sicherzustellen.

protected string TotalWidth 
{ 
    get 
    { 
     //In this example this.Madibu.Materiales is the datasource for the Repeater, 
     //so this.Madibu.Materiales.Count is the column count for your table. 
     //75 must be equal to the width defined in CSS class 'itemWidth' 
     return (this.Madibu.Materiales.Count * 75).ToString() + "px"; 
    } 
}