Как отображать RadListView справа налево

Я использую Telerik RadListView (элементы одинаковы в стандартном ASP.NET ListView) для отображения некоторых данных из базы данных. Я хочу показать их в виде мозаики, но при этом элементы загружаются слева направо.

Например, если у меня есть 4 элемента подряд, 5-й элемент отображается слева. Я пытался добавить dir="rtl" во все div, но это не сработало.

Как я могу загрузить элементы справа налево?

Вот мой код:

<telerik:RadListView ID="RadListView1" runat="server" AllowPaging="True" AllowCustomSorting="True" AllowMultiFieldSorting="True" AllowNaturalSort="True" DataKeyNames="product_key" DataSourceID="DS_pure_product" PageSize="12">
    <LayoutTemplate>
        <div class="RadListView RadListViewFloated RadListView_Default" dir="rtl">
            <div class="container-fluid">
                <div class="row">
                    <div class="col-md-6">
                        <telerik:RadDataPager ID="RadDataPager1" runat="server" SEOPagingQueryPageKey="CurrentPageKey" PageSize="12">
                            <Fields>
                                <telerik:RadDataPagerButtonField FieldType="FirstPrev" LastButtonImageUrl="" NextButtonImageUrl="" PrevButtonImageUrl="" />
                                <telerik:RadDataPagerButtonField FieldType="Numeric" LastButtonImageUrl="" NextButtonImageUrl="" PrevButtonImageUrl="" />
                                <telerik:RadDataPagerButtonField FieldType="NextLast" LastButtonImageUrl="" NextButtonImageUrl="" PrevButtonImageUrl="" />
                                <%--<telerik:RadDataPagerGoToPageField />
                                <telerik:RadDataPagerNumericPageSizeField />--%>
                            </Fields>
                        </telerik:RadDataPager>
                    </div>
                    <div class="col-md-3">
                        <table>
                            <tr>
                                <td>
                                </td>
                                <td>
                                </td>
                            </tr>
                        </table>
                    </div>
                    <div class="col-md-3">
                    </div>
                </div>
            </div>
            <div class="rlvFloated">
                <div class="container-fluid" dir="rtl" style="text-align:right;">
                    <div class="row">
                        <div id="itemPlaceholder" runat="server">
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </LayoutTemplate>
    <ItemTemplate>
        <div class="rlvI col-md-3 lv_items">
            <asp:Button ID="SelectButton" runat="server" CausesValidation="False" CommandName="Select" CssClass="rlvBSel" Text=" " ToolTip="Select" />
            <table class="tbl_product">
                <tr>
                    <td>
                        <asp:Image ID="Image2" CssClass="img-responsive img_product" runat="server" ImageUrl='<%# Eval("product_img") %>' />
                    </td>
                </tr>
                <tr>
                    <td>
                        <asp:Image ID="Image1" runat="server" CssClass="img_product_logo" ImageUrl='<%# Eval("product_brand") %>' />
                    </td>
                </tr>
                <tr>
                    <td>
                        <asp:Label ID="Label1" runat="server" Text='<%# Eval("product_name") %>' />
                    </td>
                </tr>
                <tr>
                    <td>
                        <asp:Label ID="Label2" runat="server" Text='<%# Eval("product_price") %>' />
                    </td>
                </tr>
            </table>
        </div>
    </ItemTemplate>
    <EmptyDataTemplate>
        <div class="RadListView RadListView_Default">
            <div class="rlvEmpty">
                There are no items to be displayed.</div>
        </div>
    </EmptyDataTemplate>
</telerik:RadListView>

asp.net telerik radlistview
person Ashkan Hafezi    schedule 01.05.2015    source источник
comment
Это может помочь предоставить изображения того, как вы хотите, чтобы это выглядело, по сравнению с тем, как это выглядит. Если вы просто хотите, чтобы все было правильно выровнено, это одно. Если вы хотите, чтобы элементы отображались в другом порядке, это другое.   -  person j.f.    schedule 01.05.2015
comment
Я попытался добавить изображение, но мне не разрешили ... потому что у меня должно быть 100 человек или что-то в этом роде. :(   -  person Ashkan Hafezi    schedule 01.05.2015
comment
Ах да, извините за это. это то, что вы собираетесь делать? Обратите внимание, как зеленый, оранжевый и синий прямоугольники выровнены по правой стороне красного поля.   -  person j.f.    schedule 01.05.2015
comment
спасибо за ваш быстрый ответ .... я не знаю, как работает ваш код (я не так хорош с css), но я использовал ваш код с некоторыми изменениями и установил float: прямо, и теперь он отлично работает ... большое спасибо много ....   -  person Ashkan Hafezi    schedule 01.05.2015
comment
Отлично, рад, что у вас все заработало! Со временем CSS станет более понятным. Просто продолжай. Обязательно отметьте ответ как принятый, если он вам помог. Добро пожаловать в StackOverflow!   -  person j.f.    schedule 02.05.2015

Ответы (1)


arrow_upward
0
arrow_downward

После некоторого разговора в комментариях, похоже, вы хотите выровнять свой контент по правому краю. В этом случае float: right - это то, что вы ищете.

Ключ в том, чтобы иметь общий контейнер, в котором будут храниться все ваши данные. Затем возьмите по одному контейнеру для каждой строки. Этот внутренний контейнер - это то, что вы будете плавать вправо. Если не задавать ширину внутреннему контейнеру, он вырастет до размеров своих дочерних элементов. Если ширина внутреннего контейнера меньше ширины его родителя, он будет отображаться как выравнивающийся по правой стороне.

Ниже приведен пример этого.

.body {
    height: 100px;
    width: 500px;
    background-color: red;
}

.child-container {
    height: 100%;
    float: right;
}

.child-1 {
    height: 50%;
    width: 100px;
    float: left;
    background-color: green;
}

.child-2 {
    height: 50%;
    width: 100px;
    float: left;
    background-color: orange;
}

.child-3 {
    height: 50%;
    width: 100px;
    float: left;
    background-color: blue;
}
<div class="body">
    <div class="child-container">
        <div class="child-1">
        </div>
        <div class="child-2">
        </div>
        <div class="child-3">
        </div> 
    </div>
</div>

person j.f.    schedule 01.05.2015