Question

我已经阅读了这篇优秀的Multi-column list article以及this question on 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

如果它是无序列表，您只需浮动＆lt; li＆gt;向左并给它一个小于（100 / n）％

的宽度

在n列之间划分内容的最佳方法是什么？

3 个答案: