如何将按钮放在Repeater控制中的图像下方？

Question

我正在学习如何使用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来处理，但我不知道如何。有人可以提供一些帮助吗？

谢谢！

Answer 1

试试这个在您的项目模板：

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

Answer 2

你可以把<br />形象和按键之间

Answer 3

这应该把按钮在图像的左下角和保持图像布局和你的第一个截图一样。

<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>的正确对齐，<li>的将是另一种选择。