我使用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>
1 回答
在评论中进行了一些对话之后,听起来你想要的是对齐你的内容 . 在这种情况下,
float: right
是您正在寻找的 .关键是要有一个容纳所有数据的整体容器 . 然后,为每一行准备另一个容器 . 这个内部容器就是你向右浮动的东西 . 通过不给内部容器一个宽度,它将变得像它的孩子一样大 . 如果内部容器的宽度小于其父容器的宽度,则它将显示为与右侧对齐 .
以下是一个例子 .