Asp.net 如何从右向左显示RadListView
我使用Telerik RadListView(元素在标准ASP.NET ListView中相同)来显示数据库中的一些数据。我想在平铺布局中显示它们,但它会从左到右加载项目 例如,如果一行中有4项,则第5项显示在左侧。我试图将Asp.net 如何从右向左显示RadListView,asp.net,telerik,radlistview,Asp.net,Telerik,Radlistview,我使用Telerik RadListView(元素在标准ASP.NET ListView中相同)来显示数据库中的一些数据。我想在平铺布局中显示它们,但它会从左到右加载项目 例如,如果一行中有4项,则第5项显示在左侧。我试图将dir=“rtl”添加到所有div中,但没有成功 如何从右向左加载项目 这是我的密码: <telerik:RadListView ID="RadListView1" runat="server" AllowPaging="True" AllowCustomSorting
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{
高度:100px;
宽度:500px;
背景色:红色;
}
.儿童容器{
身高:100%;
浮动:对;
}
.child-1{
身高:50%;
宽度:100px;
浮动:左;
背景颜色:绿色;
}
.child-2{
身高:50%;
宽度:100px;
浮动:左;
背景颜色:橙色;
}
.儿童-3{
身高:50%;
宽度:100px;
浮动:左;
背景颜色:蓝色;
}
它可能有助于提供您希望它看起来像什么的图片,而不是它看起来像什么。如果你只是想让所有的东西都对齐,那是一回事。如果您希望项目以不同的顺序显示,则是另一种情况。我尝试添加图像,但不允许。。。因为我必须有100人或类似的人口(啊,是的,很抱歉。这就是你想要的吗?注意绿色、橙色和蓝色框是如何与红色框的右侧对齐的。谢谢你的快速响应……我不知道你的代码是如何工作的(我不太擅长css)但是我对你的代码做了一些修改并设置了float:现在它工作得很好…非常感谢你…很好,很高兴你让它工作起来!CSS最终会变得更有意义。坚持下去。如果它对你有帮助,请确保将答案标记为已接受。欢迎使用StackOverflow!