1

我正在学习如何使用 ASP.Net Repeater 控件。目前，我的输出如下所示： 在此处输入图像描述

我的来源如下所示：

<form id="form1" runat="server">
<div>
    <asp:FileUpload runat="server" ID="FileUpload1" />&nbsp
    <asp:Button runat="server" Text="Upload" ID="Button1" OnClick="Button1_Click" />
    <hr />
    <asp:Repeater runat="server" ID="Repeater1">
        <ItemTemplate>

                <asp:Image runat="server" Width="200px" Height="200px" ID="image1" ImageUrl='<%# Eval("Url") %>' />

        </ItemTemplate>
    </asp:Repeater>
    <hr />
    <asp:SqlDataSource ID="SqlDataSource1" runat="server" ConnectionString="<%$ ConnectionStrings:ConnectionString %>"
        SelectCommand="SELECT [Url] FROM [Gallery]"></asp:SqlDataSource>
</div>
</form>

现在，我尝试添加一个按钮，但它并没有完全出现在我想要的位置，并且它会抛出显示： 在此处输入图像描述

我的 ItemTemplate 代码现在看起来像这样：

            <asp:Image runat="server" Width="200px" Height="200px" ID="image1" ImageUrl='<%# Eval("Url") %>' />
            <asp:Button runat="server" ID="btnCopy" Text="Copy" />

所以，我想知道，我怎样才能让按钮出现在图像下方？我猜这可以通过使用 CSS 来处理，但我不确定如何处理。有人可以提供一些帮助吗？

谢谢！

4

3 回答 3

2

在您的项目模板中尝试此操作：

   <div style="float:left;overflow:hidden;display:inline-block;">
                <asp:Image runat="server" Width="200px" Height="200px" ID="image1" ImageUrl='<%# Eval("Url") %>' />
                <br/>
                <asp:Button runat="server" ID="btnCopy" Text="Copy" />
    </div>
于 2013-04-10T16:13:56.197 回答
1

这应该将按钮放在图像的左下角，并保持图像布局与您的第一个屏幕截图相同。

<ItemTemplate>
    <div style="width:200px;height:200px;float:left;position:relative;margin:2px;">
        <asp:Image runat="server" Width="200px" Height="200px" ID="image1" ImageUrl='<%#Eval("Url") %>' />
        <asp:Button runat="server" ID="btnCopy" Text="Copy" style="position:absolute;left:2px;bottom:2px;" />
    </div>
</ItemTemplate>

如果你不能让<div>'s 正确对齐，<li>'s 将是另一种选择。

于 2013-04-10T16:37:16.637 回答
0

您可以<br />在图像和按钮之间放置

于 2013-04-10T16:08:05.963 回答