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