我正在使用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>
在评论中进行一些交谈之后,听起来您想要的是使内容正确对齐。在这种情况下,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>
本文收集自互联网,转载请注明来源。
如有侵权,请联系 [email protected] 删除。
我来说两句