我目前正在asp.net网站上展示游戏库。我已将游戏信息（如姓名，封面图片等）存储在数据库中，我想从数据库中检索游戏并将其显示在我的网站上。现在，我正在使用GridView来获取数据。它从我的表中获取值uname（视频游戏的名称）和uimg（游戏的封面图像），并显示如下：
但是，我想编辑布局，使它看起来像这样：
所以你可以看到，uname显示在uimg正下方，并且每排有3场比赛。
到目前为止，代码（仅在Visual Studio中使用标准GridView）看起来像这样。 Default.aspx的：
<asp:GridView ID="GridView1" runat="server" CellPadding="1" ForeColor="#333333" GridLines="None" AutoGenerateColumns="false">
<AlternatingRowStyle BackColor="White" />
<EditRowStyle BackColor="#7C6F57" />
<FooterStyle BackColor="#1C5E55" Font-Bold="True" ForeColor="White" />
<HeaderStyle BackColor="#1C5E55" Font-Bold="True" ForeColor="White" />
<PagerStyle BackColor="#666666" ForeColor="White" HorizontalAlign="Center" />
<RowStyle BackColor="#E3EAEB" />
<SelectedRowStyle BackColor="#C5BBAF" Font-Bold="True" ForeColor="#333333" />
<SortedAscendingCellStyle BackColor="#F8FAFA" />
<SortedAscendingHeaderStyle BackColor="#246B61" />
<SortedDescendingCellStyle BackColor="#D4DFE1" />
<SortedDescendingHeaderStyle BackColor="#15524A" />
<Columns>
<asp:TemplateField HeaderText="Name">
<ItemTemplate>
<asp:HyperLink ID="lbl1" runat="server" NavigateUrl='<%#Eval("unavurl") %>' Text='<%#Eval("uname") %>' />
</ItemTemplate>
</asp:TemplateField>
<asp:TemplateField HeaderText="Image">
<ItemTemplate>
<asp:HyperLink ID="img" runat="server" ImageUrl='<%#Eval("uimg") %>' NavigateUrl='<%#Eval("unavurl") %>' ImageHeight="159" ImageWidth="128" />
</ItemTemplate>
</asp:TemplateField>
</Columns>
</asp:GridView>
另外，只需添加它，这里是C＃代码：
SqlDataAdapter da = new SqlDataAdapter("select uname,uimg,unavurl from games", con);
DataTable dt = new DataTable();
da.Fill(dt);
GridView1.DataSource = dt;
DataBind();
那么，有谁知道我怎么能做到这一点？这可以用Gridview完成，还是我应该看一些不同的东西？谢谢！
您应该使用带有DataList属性集的RepeatColumns控件。这可以实现您想要的设计。
这是一个例子
http://adidotnettotal.blogspot.com.au/2013/02/datalist-example-using.html
这款custom HTML jQuery Gridview自定义控件专为易于使用而设计，可降低代码复杂性和长度。您只需要为此控件分配datatable，它将根据给定的数据自动生成HTML gridview。
您应该像这样使用asp：TemplateField：
<asp:GridView runat="server" ID="gvResults" AutoGenerateColumns="False" DataKeyNames="ID" ForeColor="Black" GridLines="None">
<AlternatingRowStyle BackColor="White" />
<Columns>
<asp:TemplateField>
<ItemTemplate>
<table style="width: 100%;font-size:12px">
<tr >
<td >
<div style=" background-color:#F3CE5A; margin:10px; padding:3px; border:1px solid #C49527; border-radius:5px; font-size:13px; font-weight:bold">
<asp:Label ID="Label43" runat="server" Text='<%# Bind("TransactionType") %>'></asp:Label> - <asp:Label ID="Label44" runat="server" Text='<%# Bind("BuildingType") %>'></asp:Label> - <asp:Label ID="Label48" runat="server" Text='<%# Bind("Province") %>'></asp:Label> - <asp:Label ID="Label45" runat="server" Text='<%# Bind("City") %>'></asp:Label> - <asp:Label ID="Label46" runat="server" Text='<%# Bind("Region") %>'></asp:Label> - <asp:Label ID="Label47" runat="server" Text='<%# Bind("Address") %>'></asp:Label>
</div>
</td>
</tr>
</table>
<table style="width: 100%; font-size:12px">
<tr>
<td style=" padding-right:5px">
<asp:Label ID="Label2" runat="server" Text="متراژ بنا :" Font-Bold="true"></asp:Label><asp:Label ID="Label1" runat="server" Text='<%# Bind("Range") %>'></asp:Label><br />
<asp:Label ID="Label7" runat="server" Text="مساحت زمین :" Font-Bold="true"></asp:Label><asp:Label
ID="Label8" runat="server" Text='<%# Bind("Area") %>'></asp:Label><br />
<asp:Label ID="Label9" runat="server" Text="تعداد اتاق :" Font-Bold="true"></asp:Label><asp:Label ID="Label10"
runat="server" Text='<%# Bind("RoomNo") %>'></asp:Label><br />
<asp:Label ID="Label11" runat="server" Text="شماره طبقه :" Font-Bold="true"></asp:Label><asp:Label
ID="Label12" runat="server" Text='<%# Bind("ClassNo") %>'></asp:Label><br />
<asp:Label ID="Label14" runat="server" Text="تعداد کل طبقات :" Font-Bold="true"></asp:Label><asp:Label ID="Label15"
runat="server" Text='<%# Bind("ClassTot") %>'></asp:Label><br />
<asp:Label ID="Label13" runat="server" Text="تعداد واحد در طبقه :" Font-Bold="true"></asp:Label><asp:Label ID="Label28"
runat="server" Text='<%# Bind("UnitsInClass") %>'></asp:Label><br />
<asp:Label ID="Label31" runat="server" Text="تعداد کل واحد ها :" Font-Bold="true"></asp:Label><asp:Label ID="Label32"
runat="server" Text='<%# Bind("UnitsTot") %>'></asp:Label><br />
<asp:Label ID="Label33" runat="server" Text="نمای ساختمان :" Font-Bold="true"></asp:Label><asp:Label ID="Label34"
runat="server" Text='<%# Bind("BuildingView") %>'></asp:Label><br />
<asp:Label ID="Label35" runat="server" Text="وضعیت سکونت :" Font-Bold="true"></asp:Label><asp:Label ID="Label36"
runat="server" Text='<%# Bind("ResidentType") %>'></asp:Label><br />
<asp:Label ID="Label37" runat="server" Text="سن بنا :" Font-Bold="true"></asp:Label><asp:Label ID="Label38"
runat="server" Text='<%# Bind("YoursOld") %>'></asp:Label><br />
<asp:Label ID="Label39" runat="server" Text="چند ساله :" Font-Bold="true"></asp:Label><asp:Label ID="Label40"
runat="server" Text='<%# Bind("Old") %>'></asp:Label><br />
<asp:Label ID="Label41" runat="server" Text="موقعیت جغرافیائی :" Font-Bold="true"></asp:Label><asp:Label ID="Label42"
runat="server" Text='<%# Bind("GeoPosition") %>'></asp:Label><br />
</td>
<td>
<asp:Label ID="Label3" runat="server" Text="کابینت آشپزخانه :" Font-Bold="true"></asp:Label><asp:Label
ID="Label4" runat="server" Text='<%# Bind("Cabinet") %>'></asp:Label><br />
<asp:Label ID="Label5" runat="server" Text="سرویس بهداشتی :" Font-Bold="true"></asp:Label><asp:Label
ID="Label6" runat="server" Text='<%# Bind("Sanitary") %>'></asp:Label><br />
<asp:Label ID="Label29" runat="server" Text="کف پوش :" Font-Bold="true"></asp:Label><asp:Label ID="Label30"
runat="server" Text='<%# Bind("Floor") %>'></asp:Label><br />
<asp:Label ID="Label49" runat="server" Text="قیمت :" Font-Bold="true"></asp:Label><asp:Label ID="Label50"
runat="server" Text='<%# Bind("TotPrice") %>'></asp:Label><br />
<asp:Label ID="Label51" runat="server" Text="قیمت متری :" Font-Bold="true"></asp:Label><asp:Label ID="Label52"
runat="server" Text='<%# Bind("Price") %>'></asp:Label><br />
<asp:Label ID="Label55" runat="server" Text="واحد پول :" Font-Bold="true"></asp:Label><asp:Label ID="Label56"
runat="server" Text='<%# Bind("Currency") %>'></asp:Label><br />
<asp:Label ID="Label59" runat="server" Text="تعداد پارکینگ :" Font-Bold="true"></asp:Label><asp:Label ID="Label60"
runat="server" Text='<%# Bind("Parking") %>'></asp:Label><br />
<asp:Label ID="Label61" runat="server" Text="تعداد تلفن :" Font-Bold="true"></asp:Label><asp:Label ID="Label62"
runat="server" Text='<%# Bind("TelsNo") %>'></asp:Label><br />
<asp:Label ID="Label57" runat="server" Text="دیگر امکانات :" Font-Bold="true"></asp:Label><asp:Label ID="Label58"
runat="server" Text='<%# Bind("Other") %>'></asp:Label><br />
</td>
<td>
<asp:Label ID="Label53" runat="server" Text="نوع سند / کاربری :" Font-Bold="true"></asp:Label><asp:Label
ID="Label54" runat="server" Text='<%# Bind("DocType") %>'></asp:Label><br />
<asp:Label ID="Label18" runat="server" Text="نام مالک :" Font-Bold="true"></asp:Label><asp:Label
ID="Label19" runat="server" Text='<%# Bind("OwnerName") %>'></asp:Label><br />
<asp:Label ID="Label20" runat="server" Text="پست الکترونیکی :" Font-Bold="true"></asp:Label><asp:Label
ID="Label21" runat="server" Text='<%# Bind("EMail") %>'></asp:Label><br />
<asp:Label ID="Label22" runat="server" Text="تلفن ثابت :" Font-Bold="true"></asp:Label><asp:Label
ID="Label23" runat="server" Text='<%# Bind("Tel1") %>'></asp:Label><br />
<asp:Label ID="Label24" runat="server" Text="تلفن همراه :" Font-Bold="true"></asp:Label><asp:Label
ID="Label25" runat="server" Text='<%# Bind("Mobile") %>'></asp:Label><br />
<asp:Label ID="Label26" runat="server" Text="زمان ثبت :" Font-Bold="true"></asp:Label><asp:Label ID="Label27"
runat="server" Text='<%# Bind("DateTime") %>'></asp:Label>
</td>
</tr>
</table>
<table style="width: 100%;">
<tr>
<td>
</td>
</tr>
</table>
<table style="width: 100%;font-size:12px">
<tr>
<td>
</td>
</div>
</tr>
</table>
</ItemTemplate>
</asp:TemplateField>
</Columns>