如何使用 Repeater 控件显示产品 ASP.NET

Question

我正在使用转发器控件来显示任何电子商务网站显示的结果，我的意思是水平和垂直，但我的转发器在列表中显示结果，但我希望它每行显示 4 个项目，然后是第二行然后是第三行，但它像直线列表一样从上到下显示项目，请告诉我该怎么做以及如何显示我想要的项目，我已经在这里看到了一些答案，但这些都不起作用好吧，这就是我发布问题的原因

     <asp:Repeater ID="Repeater1" runat="server">
                <ItemTemplate>
                    <div class="span4" style="width:187px" runat="server">
                        <div class="products">
                            <a href="='<%# Eval("ID") %>'">
                            <img alt="" src='<%# Eval("ImageLink") %>' height="195" width=""></a>
                            <br/>
                            <h3 class="title" style="font-family:Pristina;font-size:medium; width:auto;"> <%# Eval("Name") %></h3>
                            <p class="price" style="font-family:Pristina;font-size:medium;"><b>Price</b> <%# Eval("Price") %></p>
                            <a href="<%#Eval("Link") %>" style="font-family:'Malgun Gothic';font-size:medium;">www.shophive.com</a>

                            </div>
                        </div>
    </ItemTemplate> 
</asp:Repeater>

我希望我的产品显示的方式如图所示，我正在用数据集填充我的中继器，我想要我的输出like these items are displayed

Answer 1

将中继器控件包裹在 <div> 中并为其指定固定宽度。

将style="display:inline-block;"添加到<div class="span4"

<div style="width: 900px;">
    <asp:Repeater ID="Repeater1" runat="server">
        <ItemTemplate>
            <div class="span4" style="display:inline-block;" runat="server">
                <div class="products">
                    <a href="='<%# Eval("ID") %>'">
                        <img alt="" src='<%# Eval("ImageLink") %>' height="195" width=""></a>
                    <br />
                    <h3 class="title" style="font-family: Pristina; font-size: medium; width: auto;"><%# Eval("Name") %></h3>
                    <p class="price" style="font-family: Pristina; font-size: medium;"><b>Price</b> <%# Eval("Price") %></p>
                    <a href="<%#Eval("Link") %>" style="font-family: 'Malgun Gothic'; font-size: medium;">www.shophive.com</a>
                </div>
            </div>
        </ItemTemplate>
    </asp:Repeater>
</div>

输出：

如何使用 Repeater 控件显示产品 ASP.NET

how to display products using Repeater control ASP.NET

javascript

c#

asp.net

repeater