我有以下中继器:
<table>
<asp:Repeater runat="server" ID="rptBrandRepeater">
<ItemTemplate>
<tr>
<td>
<asp:HyperLink runat="server" ID="lnkCompanyLink">
<asp:Image runat="server" ID="imgCompanyLogo" />
</asp:HyperLink>
</td>
</tr>
</ItemTemplate>
</asp:Repeater>
</table>
我想每四个表单元格开始一个新行。
我不想使用jQuery或Javascript来实现这一点。
输出的html应该看起来像这样的页面:http://rmtequipment.com/golfandturf.aspx
我制作了一个界面,允许他们自己添加这些徽标。因此,这个页面将是动态构建的。
实现这一目标的最佳方式是什么?
如果列表视图或网格视图是更好的方法,我也持开放态度。
提前谢谢。
在我看来,最好的方法是使用DataList。您可以通过RepeatColumns
属性控制项的RepeatDirection
以及列数,并通过RepeatLayout
控制要使用的布局。
因此,您的DataList将被定义为:
<asp:DataList RepeatDirection="Horizontal" RepeatColumns="4" RepeatLayout="Table" ...
最好的方法是去掉表并使用浮动的div
元素,因为它既不是表也不包含表格数据。
<asp:Repeater runat="server" ID="rptBrandRepeater">
<ItemTemplate>
<div class="logo">
<asp:HyperLink runat="server" ID="lnkCompanyLink">
<asp:Image runat="server" ID="imgCompanyLogo" />
</asp:HyperLink>
</div>
</ItemTemplate>
</asp:Repeater>
然后设计你的div
div.logo{ float: left; width: 200px; display: inline; }
然后,根据包含所有这些徽标的元素的宽度,这将自然地打断到下一条"线"上。
有关示例,请参阅此基本演示:http://jsfiddle.net/ygnEa/