Формирование базы данных сгенерированного списка ссылок в 4 столбца

Question

У меня есть запрос к базе данных, который возвращает IList с 12 результатами. Каждый результат представляет собой ссылку, и я хотел бы отформатировать свои результаты так, чтобы я получил 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]