我有一些数据应该显示在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'> </li>
}
}
答案 0 :(得分: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'> </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++;
}
}
我不喜欢嵌入的原始html关闭ul
标签,因此我修改了代码以避免这种情况。我认为它也更清楚地表达了意图。