简体   繁体   中英

how to display products using Repeater control ASP.NET

i am using repeater control to display results like any e commerce website shows, i mean horizontaly and vertically as well, but my repeater is displaying results in a list but i want it to show 4 items per row then second row then third row, but it is showing items from top to bottom like a straight line list, please tell me what to do and how can i display items like i want them to,i have already seen some answers here but those are not working as well so that's why i am posting my question

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

The way i want my products to be display is shown in the image, and i am filling my repeater with dataset, i want my output like these items are displayed

  1. Wrap your repeater control in a <div> and give it a fixed width.
  2. Add style="display:inline-block;" to <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>

Output: 在此处输入图片说明

The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.

 
粤ICP备18138465号  © 2020-2024 STACKOOM.COM