Listview 中的 ItemTemplate - 布局问题答案

【问题标题】：ItemTemplate in Listview - Layout issueListview 中的 ItemTemplate - 布局问题
【发布时间】：2012-08-07 12:52:02
【问题描述】：

我的 aspx 页面中有以下列表视图

<asp:ListView ID="ListView1" GroupItemCount="4" runat="server" 
     DataKeyNames="contentid" DataSourceID="sqldsPhotos">
<LayoutTemplate>
    <asp:Placeholder
    id="groupPlaceholder"
    runat="server" />
</LayoutTemplate>
<GroupTemplate>
    <div>
    <asp:Placeholder
    id="itemPlaceholder"
    runat="server" />
    </div>
</GroupTemplate>
<ItemTemplate>

    <asp:Image id="picAlbum" runat="server" 
         ImageUrl='<%# "ShowImage.ashx?id=" + Convert.ToString(Eval("contentid")) %>'   
         Height="108" Width="192" />
    <asp:LinkButton ID="LinkButton1" runat="server">LinkButton</asp:LinkButton>
    </ItemTemplate>
<EmptyItemTemplate>           

</EmptyItemTemplate>
</asp:ListView>

生成的网页显示我的图片，旁边有链接按钮。我想要的是每个项目下方居中的链接按钮的图像。

有人可以帮助我使用必要的 html 或 css 来实现这一点吗？

【问题讨论】：

标签： asp.net css itemtemplate

【解决方案1】：

在ItemTemplate里面试试下面的html

<div style="float: left; margin-left: 10px; text-align:center;width: 192; ">
    <asp:Image id="picAlbum" runat="server" 
         ImageUrl='<%# "ShowImage.ashx?id=" + Convert.ToString(Eval("contentid")) %>'   
         Height="108" Width="192" />
    <asp:LinkButton ID="LinkButton1" runat="server"
         style="display: block; clear: both;">LinkButton</asp:LinkButton>
</div>

上面的代码将并排显示 div。因此，为了在列表视图中显示 4 个 div 添加 (800px) 到您的项目。

如果您没有在中心获得链接按钮，请添加一些 margin-left 以将其显示在中心。

【讨论】：

不幸的是，这并不能满足我的需求。我的图片和链接仍然并排。这个标记只是将它们集中在容器中。我需要的是图片下方居中的链接。这是它最初的样子before，这是添加div标签后的样子after
我正在寻找带有下方链接的照片，每行 4 次。
您应该添加这些有问题的点。否则别人怎么会知道，你需要什么。我已经相应地改变了答案。让我知道是否需要其他任何内容。

【解决方案2】：

试试这个：

<div style="width: 192px; text-align:center;">
    <asp:Image id="picAlbum" runat="server" 
         ImageUrl='<%# "ShowImage.ashx?id=" + Convert.ToString(Eval("contentid")) %>'   
         Height="108" Width="192" /><br/>
    <asp:LinkButton ID="LinkButton1" runat="server">LinkButton</asp:LinkButton>
</div>

【讨论】：