1

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

我正在尝试让这些 div 标签彼此相邻

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>

先感谢您。

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

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

1 回答 1

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）并确保宽度和边距使得列并排显示并且不会发生浮动下降。

这是一个演示：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 的人

于 2012-08-06T15:55:29.090 回答