Question

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

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

另外，我不能只是将它硬编码成一个因为查询结果的范围可以从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。

Answer 2

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

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

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

2 个答案:

HTML

CSS