0

我有一些数据应该显示在 5 列中。当前代码运行良好，数据是从数据库中挑选出来的，并在前 5 列中正确显示（每列有 7 个数据）。

但是在第五列之后，下一列应该从第一列下方开始，而不是从第二列开始并继续。

下面是当前使用的代码。

 <li><a href="/c/@Model.CatList[0].Id/all/@Model.CatList[0].Name" class='white'>@Model.CatList[0].Name</a></li>

                      @for (int i = 1; i < Model.CatList.Count(); i++)
                      {
                            <li><a href="/c/@Model.CatList[i].Id/all/@Model.CatList[i].Name" class='white'>@Model.CatList[i].Name</a></li>


                          if (i % Model.FooterCount == 0)
                          {

                               @Html.Raw("</ul><ul>");
                                <li class='itemCaption f17o'>&nbsp;</li>
                          }

                      }
4

1 回答 1

1

如果没有确切 html 的更多详细信息，您需要在显示的每一行的第一个块上添加 style="clear:left"。就像是：

@{
    int cellCount = 1;
    int columns = 5;

    var items = Model.CatList.Take(Model.FooterCount);
}

@while(items.Count > 0)
{
    string style = "float:left;"
    if(cellCount % columns == 0)
    {
        style += "clear:left;"
    }

    <ul style='@style'>
        @if (cellCount != 1)
        {
            <li class='itemCaption f17o'>&nbsp;</li>
        }

        @foreach(item in items)
        {
            <li>
                <a href="/c/@item.Id/all/@item.Name" class='white'>@item.Name</a>
            </li>
        }
    </ul>

    @{
    items = Model.CatList.Skip(cellCount * Model.FooterCount).Take(Model.FooterCount);
    cellCount++;
    }
}

我不喜欢关闭ul标签的嵌入式原始 html，所以我修改了代码以避免这种情况。我认为它也更清楚地表达了意图。

于 2013-05-08T17:12:59.620 回答