Question

请查看下图。我正在尝试删除左侧图像之间的空白区域。每个图像都在div标签中。我的CSS位于图片之后。

I'm trying to get these div tags to come up next to eachother

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），并确保宽度和边距使得列并排出现并且不会发生浮动。< / p>

以下是演示： 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>

可能有一个更好的解决方案，不需要在图像中循环三次，但最好留给更了解ASP.net的人

排列嵌套的div标签

1 个答案: