ASP.NET Repeater, динамически запускающий новую строку таблицы

Question

У меня есть следующий репитер:

<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

Я сделал интерфейс, который позволит им добавлять эти логотипы самостоятельно. Так что эта страница будет динамически построена.

Каков наилучший способ достичь этой цели?

Если просмотр списка или сетки является лучшим подходом, я также открыт для этого.

Заранее спасибо.

Answer 1

На мой взгляд, лучший подход - использовать DataList. Вы можете контролировать RepeatDirection элементов, а также количество столбцов через RepeatColumns свойство и макет для использования через RepeatLayout,

Таким образом, ваш DataList будет определен как:

<asp:DataList RepeatDirection="Horizontal" RepeatColumns="4" RepeatLayout="Table" ...

Answer 2

Ваш лучший подход будет избавиться от таблицы и использовать плавающий 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.logo{ float: left; width: 200px; display: inline; }

Затем он естественным образом разбивается на следующую "строку" в зависимости от ширины элемента, содержащего все эти логотипы.

Посмотрите эту базовую демонстрацию для примера: http://jsfiddle.net/ygnEa/