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>を適切に揃えることができない場合は、<li>別のオプションになります。

于 2013-04-10T16:37:16.637 に答える