Css 如何使用Asp.Net MVC Razor语法通过循环显示一行中的3项

我遇到了一个场景，我想在一行中显示3个项目。我成功地在一行中显示了两个项目。我尝试了，但无法连续显示3项。在这方面的任何帮助都将不胜感激

这是我试过的代码片段

    @model  IList<MvcApplication1.tblTest>
   @{
    ViewBag.Title = "Index";
    Layout = "~/Views/Shared/_Layout.cshtml";
    }

    <h2>Displaying three items(products) in a row</h2>

    <div style="display: inline-block">

    @for (var i = 0; i < Model.Count(); i++)
    {

        <div style="display: inline-block">

            <div> @Model[i].testId</div>
            <div>@Model[i].testName</div>      
            <div>@Model[i].testDescription</div> 

        </div>   

        if (i% 3 == 1)
        {
        <br />
        }
    }
</div>

@model-IList
@{
ViewBag.Title=“Index”；
Layout=“~/Views/Shared/_Layout.cshtml”；
}
一行显示三个项目（产品）
@对于（var i=0；i
}
}

试试i%3==2

@model  IList<MvcApplication1.tblTest>
   @{
    ViewBag.Title = "Index";
    Layout = "~/Views/Shared/_Layout.cshtml";
    }

    <h2>Displaying three items(products) in a row</h2>

    <div style="display: inline-block">

    @for (var i = 0; i < Model.Count(); i++)
    {

        <div style="display: inline-block">

            <div> @Model[i].testId</div>
            <div>@Model[i].testName</div>      
            <div>@Model[i].testDescription</div> 

        </div>   

        if (i% 3 == 2)
        {
        <br />
        }
    }
</div>

@model-IList
@{
ViewBag.Title=“Index”；
Layout=“~/Views/Shared/_Layout.cshtml”；
}
一行显示三个项目（产品）
@对于（var i=0；i
}
}

当然，增加休息时间是一种方法

但是您可以考虑使用这种方法来避免添加

标记

在两个循环中迭代列表，一个循环以3的步长递增，直到最后一个元素，另一个循环从0到2。为外部循环的每个迭代添加一个div包装器，为内部循环添加一个值。这样，您可以在视图中获得更结构化的HTML

//I have used bootstrap classed to style, you can have your own styling on this structure.

@model  IList<MvcApplication1.tblTest>
@{
    ViewBag.Title = "Index";
    Layout = "~/Views/Shared/_Layout.cshtml";
}

<h2>Displaying three items(products) in a row</h2>

<div style="display: inline-block">
    @for (int i = 0; i < Model.Count(); i += 3)
    {
        <div class="row">
            @{
                int j = 0;
                for (; j <= 2 && i + j < Model.Count(); j++)
                {
                    <div class="col-md-4">
                        <div> @Model[i + j].testId</div>
                        <div>@Model[i + j].testName</div>
                        <div>@Model[i + j].testDescription</div>
                    </div>
                }
            }
        </div>
    }
</div>

//我使用了按样式分类的引导，您可以在此结构上拥有自己的样式。
@模型IList
@{
ViewBag.Title=“Index”；
Layout=“~/Views/Shared/_Layout.cshtml”；
}
一行显示三个项目（产品）
@对于（int i=0；i因为（；j它真的很有效。谢谢你。

@foreach（WebApplication1.LanguageMang.AvailableLanguages中的变量项）
{
@ActionLink（item.LanguageFullName，“ChangeLanguage”，“Home”，new{lang=item.LanguageCultureName}，new{@class=item.imgUrl}）
}

没有发现任何明显的错误，您是否查看了返回的html以确保它不在那里？可能还需要输出Model.Count（）为了安全起见。您好，Kelly，谢谢您的快速响应。我附上了输出屏幕截图。我正在尝试连续显示3个项目，但无法显示。使用
不是最佳选择。这可能会解决您的问题，但在使用div时，请始终避免使用break来显示下一行中的项目。尝试在您的条件下使用block添加div。谢谢天哪！这帮了大忙。这正是我需要的算法。
        @foreach (var item in WebApplication1.LanguageMang.AvailableLanguages)
        {
            <div style="display: inline-block"> <div>@Html.ActionLink(item.LanguageFullName, "ChangeLanguage", "Home", new { lang = item.LanguageCultureName }, new { @class = item.imgUrl })</div>
            </div>
        }

    </div>