asp.net-mvc-3 - 排列嵌套的 div 标签

Question

请看下图。我正在尝试删除左侧图像之间的空白区域。每个图像都在一个 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 View 中创建的。

<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>

提前谢谢你。

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

@{
    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>

Answer 1

要删除图像之间的所有空白，float不会工作。您可以创建三个列 <div>标记并将您的图像放在这些列中。例如，如果您想要三列:

HTML:

<div class="imgCol">
    <!-- every third image -->
</div>
<div class="imgCol">
    <!-- every third image -->
</div>
<div class="imgCol">
    <!-- every third image -->
</div>

然后，添加float: left;到列类的 CSS(在本例中为 .imgCol)并确保宽度和边距使列并排显示并且不会发生 float 下降。

这是一个演示: http://jsfiddle.net/yLRWK/

对于您的特定情况，您可以按如下方式实现。我不会在 ASP.net 中编写代码，因此会抛出一些伪代码

<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>

可能有更好的解决方案，不需要循环遍历图像 3 次，但这最好留给更了解 ASP.net 的人