将数据库生成的链接列表格式化为 4 列答案

【问题标题】：Formating a database generated list of links into 4 columns将数据库生成的链接列表格式化为 4 列
【发布时间】：2010-01-16 00:25:08
【问题描述】：

我有一个数据库查询，它返回一个包含 12 个结果的 IList。每个结果都是一个链接，我想格式化我的结果，以便我并排获得 3 个结果的 4 个列表，有点像这样：

item1       item4       item7       item10
item2       item5       item8       item11
item3       item6       item9       item12

另外，我不能将其硬编码为一个，因为查询结果的范围可能是 4 到 16。我只知道我想要 4 列，并且我想按升序填充第一列，然后是第二列，然后是第三个，最后是第四个。

【问题讨论】：

如果最多可以有 16 列并且想要 4 列，第 4 项不应该在第一列吗？我的意思是 .. 每列应该包含 4 个值 ..
我正在使用 C# 和 ASP.NET 3.5

标签： html css

【解决方案1】：

如果您只是在寻找 HTML 和 CSS，试试这个：

HTML

<div class="ilist">
  <div class="column">
    <span class="item">item1</span>
    <span class="item">item2</span>
    <span class="item">item3</span>
    <span class="item">item4</span>
  </div>
  <div class="column">
    <span class="item">item5</span>
    <span class="item">item6</span>
    <span class="item">item7</span>
    <span class="item">item8</span>
  </div>
  <div class="column">
    <span class="item">item9</span>
    <span class="item">item10</span>
    <span class="item">item11</span>
    <span class="item">item12</span>
  </div>
  <div class="column">
    <span class="item">item13</span>
    <span class="item">item14</span>
    <span class="item">item15</span>
    <span class="item">item16</span>
  </div>
</div>

CSS

.ilist {
  overflow-y:hidden;
}
.column {
  float:left;
  width:200px; /* You will want to specify
                  an appropriate width */
}
.column .item {
  display:block;
  height:1em;
}

请注意，如果一行中的任何两个项目（如 item1 和 item7）的高度不同，这将不起作用。

所以当你有/需要这样的东西时，这将不起作用：

item1       item4       item7       item10
            item4
item2       item5       item8       item11
item3       item6       item9       item12

如果您正在寻找 C#，您可以尝试以下方法：

IList iList = /* ... */;
using (HtmlTextWriter writer = new HtmlTextWriter(stringWriter))
{
 writer.AddAttribute(HtmlTextWriterAttribute.Class, "ilist");
 writer.RenderBeginTag(HtmlTextWriterTag.Div);
 for(int i=0; i<iList.Count; i++) {
  writer.AddAttribute(HtmlTextWriterAttribute.Class, "column");
  writer.RenderBeginTag(HtmlTextWriterTag.Div);
  for (int j = i; j <= (i/4) && i<iList.Count; j++, i++)
  {
   writer.AddAttribute(HtmlTextWriterAttribute.Class, "item");
   writer.RenderBeginTag(HtmlTextWriterTag.Span);
   writer.WriteEncodedText(iList[i]);
   writer.RenderEndTag();
  }
  writer.RenderEndTag();
 }
 writer.RenderEndTag();

}

...你当然需要<link> 到 CSS。

【讨论】：

数据将在 IList 中。所以这是我的问题。
在什么情况下，也许这个问题应该重新标记？

【解决方案2】：

您想使用哪种语言？这个伪代码怎么样？

define numColumns = 4
define column[numColumns]
for i = 0 to number of items
  add item to column[i % numColumns]

【讨论】：