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显示产品

1 个答案: