1

我正在使用 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>
4

1 回答 1

0

After some conversation in the comments, it sounds like what you want is to right-align your content. In that case, float: right is what you're looking for.

The key is to have an overall container that will hold all of your data. Then, have another container for each row. This inner container is what you will float to the right. By not giving the inner container a width, it will grow to be as big as its children. If the inner container's width is less than that of its parent, it will show as aligning to the right side.

Below is an example of that.

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

于 2015-05-01T20:59:21.873 回答