Asp.net mvc 3 对齐嵌套的div标记

请看下图。我正试图消除左边图片之间的空白。每个图像都位于div标记中。我的CSS位于图像之后

div.Forum {
    border: 2px solid black;
    text-align: center;
    padding: 0 36px;
}

div.Forum div 
{
  display: inline;
  float: left;
  clear: none; 
}

div.ForumChild 
{
    border: 1px solid black;
    background-color: #F2F2F2;
    width: 228px;
    height:auto;
    padding: 12px 12px 10px 10px;
    margin: auto auto;    
    margin-bottom: 10px;
    margin-right: 20px;
    overflow: hidden;
}

div.ForumChild img {
    width: 226px;
    height: auto;
    border: 1px solid black;
    float: left;
    border-radius: 2px;

}

Forum类是父类，ForumChild类用于每个图像。这是HTML。它是在Razor视图中创建的

<div class="Forum">
    <p>The Forum</p>
            @foreach (var item in Model)
            {                                
                    <div class="ForumChild">                   
                      <img src="@item.Blog.Image.img_path" alt="Not Found" />

                      <br />

                    </div>
            }
</div>

论坛

@foreach（模型中的var项目）
{                                


}

先谢谢你

我将代码更新为以下内容以解决我的问题。谢谢大家

@{
    ViewBag.Title = "Home Page";
    int counter = 0;   
}


<div class="Forum">
    <p>The Forum</p>
        @for (int z = 0; z < 3; z++)
        {
            counter = 0;
            <div class="ForumChild">
                @foreach (var item in Model)
                {
                    if (counter % 3 == z)
                    {
                        <img src="@item.Blog.Image.img_path" alt="Not Found" />

                    }
                    counter++;
                }               
            </div>
        }
</div>

@{
ViewBag.Title=“主页”；
int计数器=0；
}
论坛

@对于（intz=0；z<3；z++）
{
计数器=0；
@foreach（模型中的var项目）
{
如果（计数器%3==z）
{
}
计数器++；
}               
}

若要按需要删除图像之间的所有空白，

float

将不起作用。您可以创建三列

标记，并将图像放在这些列中。例如，如果需要三列：

HTML:

---

可能有一个更好的解决方案，它不需要在图像中循环三次，但最好让更了解ASP.net的人来解决。要想删除图像之间的所有空白，如您所愿，

float

将不起作用。您可以创建三列

标记，并将图像放在这些列中。例如，如果需要三列：

HTML:

---

也许有一个更好的解决方案，它不需要在图像中循环三次，但最好留给更了解ASP.net的人来解决。我不知道答案，抱歉，但看起来你搞错了图像上的alt标记的用途。它的意思是描述图像，以便屏幕阅读器知道图像是什么，而如果找不到img，您认为它被用作文本。如果你正在某处存储图像的描述，我建议你使用它作为alt信息。如果没有

宽度
，你的div.Forum
margin
是无用的，你可以删除它。您还可以使用缩写来填充，例如：
padding:036px
。并尝试
display:inline
查看div.Forum div.@qeremy谢谢。我去掉了页边空白，缺少填充物。显示：inline没有任何可见的效果，尽管我不知道答案，抱歉，但看起来您对图像上的alt标记的用途有误解。它的意思是描述图像，以便屏幕阅读器知道图像是什么，而如果找不到img，您认为它被用作文本。如果你正在某处存储图像的描述，我建议你使用它作为alt信息。如果没有
宽度
，你的div.Forum
margin
是无用的，你可以删除它。您还可以使用缩写来填充，例如：
padding:036px
。并尝试
display:inline
查看div.Forum div.@qeremy谢谢。我去掉了页边空白，缺少填充物。显示：内联没有任何可见的效果，尽管它工作得很好！我用我所做的更新了我的问题。顺便说一句，我喜欢那个演示网站。再次感谢。这个工作很好！我用我所做的更新了我的问题。顺便说一句，我喜欢那个演示网站。再次感谢
<div class="imgCol">
    <!-- every third image -->
</div>
<div class="imgCol">
    <!-- every third image -->
</div>
<div class="imgCol">
    <!-- every third image -->
</div>

<div class="Forum">
    <p>The Forum</p>
    <div class="imgCol">
        /* create counter = 0 */
        @foreach (var item in Model) {                           
            /* if counter % 3 == 0, then write img tag */     
            <img src="@item.Blog.Image.img_path" alt="Not Found" />
            /* counter++ */
        }
    </div>
    <div class="imgCol">
        /* create counter = 0 */
        @foreach (var item in Model) {                           
            /* if counter % 3 == 1, then write img tag */     
            <img src="@item.Blog.Image.img_path" alt="Not Found" />
            /* counter++ */
        }
    </div>
    <div class="imgCol">
        /* create counter = 0 */
        @foreach (var item in Model) {                           
            /* if counter % 3 == 2, then write img tag */     
            <img src="@item.Blog.Image.img_path" alt="Not Found" />
            /* counter++ */
        }
    </div>
</div>