列表显示为 2 列答案

【问题标题】：List displayed as 2 columns列表显示为 2 列
【发布时间】：2012-02-01 21:02:35
【问题描述】：

我有一个需要在 aspx 页面上显示的数据的动态列表（asp .net 集合）。我希望根据列表中的项目数从左到右填充两列中的数据。在这种情况下，最好使用哪种 web 控件？

【问题讨论】：

我是否也可以将列长度设置为 3，以便超过 3 的列溢出到下一列？

标签： asp.net list multiple-columns

【解决方案1】：

您可以使用DataList、Repeater 或GridView。除了您的布局要求（以上所有功能都可以满足您的需求）之外，您还需要支持哪些功能（排序、过滤、分页等），这实际上是一个问题。

GridView 和 Repeater 有点重，但提供了简单的钩子来实现更高级的功能。

更新

例子：

<asp:DataList runat="server" id="dltest" 
                Border="1"
                Font-Name="Verdana" CellPadding="4"
                Font-Size="10pt"
                RepeatColumns="2" >
   <ItemTemplate>
     <table>
         <tr>
           <td>
              <%# DataBinder.Eval(Container.DataItem, "Description") %>
           </td>
           <td>
              <%# DataBinder.Eval(Container.DataItem, "Value") %>
           </td>
          </tr>
     </table>
   </ItemTemplate>
</asp:DataList>

注意：已根据您的需要进行了修改，但这应该可以帮助您入门。

【讨论】：

我应该设置 DataList 的什么属性以使其成为两列？你能给我举个例子吗？
不，我想我的问题并不清楚，所以我想要的是当我有一个说 5 个项目的列表时......我需要将列表的内容显示在 2 列中说左侧为 3，右侧为 2。当列表长度为 3 时，它应该在右列显示 2，在左列显示 1....长度是动态的我不知道如何指定 2 列，以便数据在两列中自行调整...我很感激你cmets 他们非常有帮助
@user1183713 这就是 DataList 上的 RepeatColumns 设置的用途。请参阅我发布的标记。 ItemTemplate 也分为 2 列的事实纯属巧合。
谢谢@lcarus！这很完美。另一个后续问题是，如果我有一个静态列表，这意味着我现在有 ....>
怎么办？希望将行排列在 2 列中。一次填满一行。像 1,2 \n 3,4 \n 有没有办法实现这一点？问题是我设置 Visible= false 的几个列表中的这些项目是动态的。所以列表必须自行调整....因为没有 RepeatColumns="2" ...你建议我怎么做？

【解决方案2】：

中继器可以在这种情况下工作，并为您设置样式提供很大的灵活性。

CSS

.container{margin:0; width:300px;}
.item{float:left;width:150px;height:30px;}
.clear{clear:both;width:100%; height:1px;}

ASPX

<div class="container">
    <asp:Repeater ID="rptTest" runat="server">
    <ItemTemplate>
        <div class="item"><%#Eval("DataColumn") %></div>
    </ItemTemplate>
    </asp:Repeater>
    <div class="clear"></div>
</div>

Eval("DataColumn") 将表示您要显示的表列的名称，您可以在代码隐藏中或使用拖放数据源控件之一设置转发器的数据源。

借助“float:left”，CSS 将使数据显示为从左到右的 2 列。容器是 300 像素宽，每个项目将是 150 像素，这应该给它两列的外观。

【讨论】：

你的意思是两个div标签，如下图所示？一个有浮动：左和其他没有？
另外我如何控制它的高度说3 ...所以如果列表中有3个或更少的项目，它的一列，如果它超过3它溢出到第二列？
您可以使用 CSS 来调整人在一行中的显示方式。如果您想要 3 个，您可以将容器调整为与 3 个项目一样宽。所以如果你的项目是 150px 宽，你需要让你的容器 450px 宽。这样你就可以连续安装 3 个了。
啊！现在我明白了，但是当我的意思是 3 时，我的意思是高度而不是列数……但是我得到了答案，非常感谢！你真是太好了
如果你给容器overflow:auto，你就不需要<div class="clear"></div>，这最后有点乱。