Repeater控件中的水平方向布局

Question

我有一个Repeater控件用于显示上传的图像。

如何横向显示Repeater中的图像？如何让图片底部显示说明文字？

- user85511

Answer 1

假设您有以下这段代码：

<asp:repeater ...>

</asp:repeater>

只需使用一些外观和感觉所需的html代码来注入"<itemtemplate>"即可。在显示水平或垂直方向上没有什么特别之处，这取决于您在项目模板中使用的html标签。

- Numenor

Answer 2

如果您不需要使用 Repeater 来实现此功能，可以使用 DataList 替代，并设置 RepeatDirection="Horizontal"。

- Nikos Steiakakis

Answer 3

如何在每行后显示横线

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

- dipti

Answer 4

You can build your ItemTemplate like:

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

标签的.floating类：

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

我通常在浮动元素的序列后放置一个清除的div，以重置盒模型的状态。

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

- tanathos

Answer 5

根据您用于显示的方式而定，例如，如果您的图片在一个div中，请在其上放置float:left;，或者使用DataList。

- Dejan.S

Answer 6

就像@numenor所说在另一个答案中, 这只是使用什么HTML的问题。这里，我们提供了一个使用HTML表格实现您所需内容的示例。

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

请注意，宽度是通过服务器端属性 TotalWidth 处理的，该属性根据重复器将显示的项目数量计算所需的总宽度。创建一个 CSS 类来定义每个项目的宽度也是推荐的，以确保正确的布局。

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";
    }
}

- daniloquio