Question

我正在使用.NET aspx进行编程。在asp：DataList组件中，我想均匀地分配列，即使并非所有列都分配了ItemTemplate。

E.g。

<asp:DataList id="test" runat="server" Width="90%" gridlines="None"
    RepeatDirection="Horizontal" 
    RepeatColumns="4" HorizontalAlign="Left">
<ItemTemplate> ... </ItemTemplate>
</asp:DataList>

在运行时，绑定到datalist的数组只包含2个元素。我仍然希望在四个空格中均匀分布列。

Answer 1

如果您致力于使用DataList，有两种合理的方法可以实现此目的。

首先，您可以将ItemTemplate包裹在具有固定宽度的div中。

<ItemTemplate>
  <div style="width: 250px;">
  ...
  </div>
</ItemTemplate>

其次，如果您的DataList必须展开或收缩以适合查看者的屏幕，您可以使用jquery。

我们将在页面加载后调整数据列表的计算客户端宽度，并调整要均匀分布的列。

<asp:DataList id="MyDataList" ClientIDMode="Static" runat="server" Width="90%" gridlines="None"
    RepeatDirection="Horizontal" 
    RepeatColumns="4" HorizontalAlign="Left">
  <ItemTemplate>  
    <div class="DataListItem">
    ....
    </div>
  </ItemTemplate>
</asp:DataList>

在我们看到jquery之前的两个快速说明

datalist上的ClientIDMode =“静态”
每个datalist项都将包含在一个div中，类为“DataListColumn”

在jquery中，在页面加载时，您可以获得计算的datalist宽度，如下所示

$(document).ready(function () {   
    $(".DataListItem").width($("#MyDataList").width() / 4); // Set the column width    
});

综上所述，您可能只想使用转发器，这样您就可以对实际列进行更多控制。

DataList列分布

1 个答案: