插入3个项目后，无法在html中插入新行

Question

我想要显示包含50张图片的页面。我想连续显示每3张图片

我所做的是：

@{
    ViewBag.Title = "Images";
}
@{int i = 0;}
<table>
@foreach(var oneImage in Model){
    <a href="ShowOneImage/?imageID=@oneImage.ID">
                <img  class="rollover_img" src ="data:image;base64,@System.Convert.ToBase64String((byte[]) oneImage.image)" />
     </a>
    {i++;}
    if (i % 3 == 0) {     
        <p></p>
    }
}
</table>

然而，我得到了这个结果：

请注意，尽管我制作了<p></p>

，但第二行并未对第四张图片进行对比

请问我做错了什么？

Answer 1

您正尝试在表格中放置链接和段落。这是无效的HTML，没有浏览器会生成这样的元素。不同的浏览器会以不同的方式做出反应，例如为您创建表格行和表格单元格，或者在表格外移动元素。

删除表格标签，或为内容生成表格行和表格单元格：

@{int i = 0;}
<table>
<tr>
@foreach(var oneImage in Model){
    <td><a href="ShowOneImage/?imageID=@oneImage.ID">
                <img  class="rollover_img" src ="data:image;base64,@System.Convert.ToBase64String((byte[]) oneImage.image)" />
     </a></td>
    {i++;}
    if (i % 3 == 0) {     
        </tr><tr>
    }
}
</tr>
</table>

Answer 2

写下这个：

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

Answer 3

<p>标记用于段落。您应该使用换行标记，而不是<br />