Как лучше распределить контент между n столбцами?

Question

Я прочитал эту превосходную статью со списком из нескольких столбцов , а также этот вопрос по SO . Я пришел к выводу, что нет кросс-браузерного способа превратить длинный неупорядоченный список в n столбцов одинаковой длины. До сих пор я был сокращен до нескольких ul-решений, таких как:

//Three columns.
string col1 = string.Empty;
string col2 = string.Empty;
string col3 = string.Empty;
int currItem = 0;
int collectionCount = myItemCollection.Count;

foreach item in myItemCollection {
  currItem++;
  if (currItem < collectionCount * .33)
  {
    col1 = col1 + item.someProperty
  } 
  else if (currItem < collectionCount * .67)  
  {
    col2 = col2 + item.someProperty
  } 
  else
  {
    col3 = col3 + item.someProperty
  }
}

string allColumns = @"<ul>" + col1 + "</ul><ul>"
                      col2 + "</ul><ul>" + col3 + "</ul>";

Response.Write(allColumns);

Есть ли более простой способ разделить мой список на группы по три или, еще лучше, просто написать соответствующие закрывающие / открывающие теги ul, когда элемент является последним элементом в «третьем»?

Answer 1

Это то, как я лично выбрал бы его реализацию.

const int numColumns = 3;
const int numColumns = 3;
var columnLength = (int)Math.Ceiling((double)myItemCollection.Count / 3);

for (int i = 0; i < myItemCollection.Count; i++)
{
    if (i % columnLength == 0)
    {
        if (i > 0)
            Response.Write("</ul>");
        Response.Write("<ul>");
    }
    Response.Write(myItemCollection[i].SomeProperty);
}

if (i % columnLength == 0)
    Response.Write("</ul>");

Вы полностью избегаете конкатенации строк (когда вы просто пишете в поток, и вам не нужно, xse StringBuilder), а также те неприятные операции с плавающей запятой, которые потенциально могут вызывают неточности для длинных списков (по крайней мере, они не нужны).

В любом случае, надеюсь, это поможет ...

Answer 2

Это слишком поздно, но Response.Write будет выводиться в непредсказуемом месте, скорее всего, впереди всех остальных выходных.

«Правильный» код должен быть элементом управления на CreateChildren, Page_Load или любом другом месте:

List<string> items = new List<string>() { "aaa", "bbb", "ccc", "ddd", "eee" };
int colSize = (int)Math.Ceiling(items.Count / 3.0);

HtmlGenericControl ul = null;
for (int i = 0; i < items.Count; i++)
{
    if (i % colSize == 0)
    {
        ul = new HtmlGenericControl("ul");
        Page.Form.Controls.Add(ul);
    }

    HtmlGenericControl li = new HtmlGenericControl("li");
    li.InnerText = items[i];
    ul.Controls.Add(li);
}

Таким образом, вам не нужно беспокоиться о рендеринге и отслеживании открывающих / закрывающих тегов.

Answer 3

Если это неупорядоченный список, вы можете просто плавать

влево и дать ему ширину чуть меньше (100 / n)%