排列嵌套的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; 

} 

论坛类是父和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> 

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），并确保宽度和利润使得列并排出现并且不发生浮动下降。

这里有一个演示：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