ASP.NET中如何用foreach循环实现服务的3列网格布局？

看起来你是在ASP.NET项目里遇到了服务列表布局的问题——现在循环出来的内容都挤在单列，新增服务只会拉长列而不会自动换行到下一行对吧？别担心，我给你几个简单有效的解决方案，分现代CSS和后端计数两种，你可以根据项目情况选择：

方法1：用CSS Grid实现（最推荐，简洁易维护） #

你的核心问题之一是给每个服务项加了固定的left: 0px; top: 0px定位，这会强制所有元素挤在同一个位置，另外也没有用容器来控制3列的排布逻辑。用CSS Grid可以完美解决，纯前端就能搞定，不需要后端额外处理：

第一步：调整HTML结构 #

把foreach循环放在一个统一的容器里，去掉每个服务项的固定定位样式：

<div class="services-grid">
    <% foreach (var product in product_list) {%>
        <div class="service-item">
            <img src="<%=product.img %>" alt="<%=product.name %>" class="img_inner">
            <div class="text1"><a href="OrderBook.aspx"><%=product.name%></a></div>
            <div class="center">
                <asp:Label runat="server" Text="Price" Font-Bold="True"></asp:Label>
                <%=product.price %>
                <br />
                <a href="_Services.aspx?pro_id=<%=product.id %>&action=add" class="l1" onclick="book_click()">
                    <strong id="booknow">BOOK</strong>
                </a>
                <br />
                <asp:Label ID="Label1" runat="server"></asp:Label>
                <br />
            </div>
        </div>
    <% } %>
</div>

第二步：添加CSS样式 #

在你的样式文件里加上这段代码，直接实现3列布局，自动换行：

.services-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr); /* 固定3列，每列宽度均等分配 */
    gap: 20px; /* 列和行之间的间距，可根据你的设计调整 */
    padding: 20px 0;
}

.service-item {
    width: 289px; /* 保持你原来的宽度，也可以去掉让Grid自动适配 */
    /* 可选：让每个服务项内部内容居中对齐 */
    display: flex;
    flex-direction: column;
    align-items: center;
}

/* 可选响应式适配：屏幕变小时自动调整列数 */
@media (max-width: 992px) {
    .services-grid {
        grid-template-columns: repeat(2, 1fr);
    }
}

@media (max-width: 576px) {
    .services-grid {
        grid-template-columns: 1fr;
    }
}

这样不管你新增多少服务，Grid都会自动在3列填满后换行，完全不用管后端计数，非常省心。

方法2：后端手动计数换行（适合老项目兼容） #

如果你的项目需要兼容比较老的浏览器，或者不想改太多CSS，也可以在foreach循环里加个计数器，每3个服务就输出一个清除浮动的容器，强制换行：

修改后的ASPX代码： #

<div class="services-container">
    <% int itemCount = 0; %>
    <% foreach (var product in product_list) {
        itemCount++; %>
        <div class="grid_3 service-item">
            <img src="<%=product.img %>" alt="<%=product.name %>" class="img_inner">
            <div class="text1"><a href="OrderBook.aspx"><%=product.name%></a></div>
            <div class="center">
                <asp:Label runat="server" Text="Price" Font-Bold="True"></asp:Label>
                <%=product.price %>
                <br />
                <a href="_Services.aspx?pro_id=<%=product.id %>&action=add" class="l1" onclick="book_click()">
                    <strong id="booknow">BOOK</strong>
                </a>
                <br />
                <asp:Label ID="Label1" runat="server"></asp:Label>
                <br />
            </div>
        </div>
        <%-- 每3个服务后添加清除浮动的元素，强制换行 --%>
        <% if (itemCount % 3 == 0) { %>
            <div class="clearfix"></div>
        <% } %>
    <% } %>
</div>

对应的CSS样式： #

.services-container {
    overflow: hidden; /* 确保容器能包裹浮动的子元素 */
    padding: 20px 0;
}

.service-item {
    float: left;
    width: 289px;
    margin-right: 20px; /* 列之间的间距 */
}

/* 每3个服务的最后一个去掉右边距，避免溢出 */
.service-item:nth-child(3n) {
    margin-right: 0;
}

.clearfix {
    clear: both;
}

几个小提醒： #

1. 你原来的onclick="book_click"少了括号，应该改成onclick="book_click()"，否则点击事件不会触发哦。
2. 图片的alt属性最好填上产品名称，既符合无障碍标准，也利于SEO。
3. 一定要去掉原来服务项里的left: 0px; top: 0px样式，这是导致所有服务挤在同一位置的核心原因。

内容的提问来源于stack exchange，提问作者waqas