如何从右到左显示 RadListView

Posted 2023-04-13

【中文标题】如何从右到左显示 RadListView

【英文标题】：How to display RadListView right to left

【发布时间】：2015-07-11 10:58:21

【问题描述】：

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

【问题讨论】：

这可能有助于提供您想要的外观与实际外观的图片。如果您只想让所有内容都对齐，那是一回事。如果您希望项目以不同的顺序显示，那就另当别论了。

我试图添加图像，但我不允许...因为我必须有 100 人口或类似的东西。 :(

啊，是的，很抱歉。 this 是你想要的吗？请注意绿色、橙色和蓝色框如何与红色框的右侧对齐。

感谢您的快速回复....我不知道您的代码是如何工作的（我对 css 不太擅长）但我使用您的代码进行了一些更改并设置了 float:right 现在它工作得很好......非常感谢......

太好了，很高兴你让它工作了！ CSS 最终会开始变得更有意义。坚持下去。如果对您有所帮助，请务必将答案标记为已接受。欢迎使用 ***！

【参考方案1】：

在 cmets 中进行了一些对话后，听起来您想要的是右对齐您的内容。在这种情况下，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>