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

Question

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

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

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

Answer 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。