Formating a database generated list of links into 4 columns

I have a database query that returns an IList with 12 results in it. Each result is a link and I would like to format my results so that I get 4 lists of 3 results side by side, kind of like this:

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

Also, I cannot just hard code it into an because the query results开发者_开发问答 could range from 4 to 16. All I know is I want 4 columns and I want to co in ascending order filling in the first column, then the second, then the third, and finally the fourth.

If you're just looking for the HTML and CSS, try this:

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;
}

Take note though that this won't work in the event that any two items in a row (like item1 and item7) won't have the same height.

So this won't work when you have/need something like this:

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

If you're looking for C# you could try something like this:

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();

}

... you of course would need to still <link> to the CSS.

What language do you want to use? How's this pseudocode?

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