無法格式化圖片網格

Question

我正在處理頁面以展示圖片庫。由於某種原因，第二行圖片持有人將不會確認
標籤。然後最終結果將成爲240像素×240像素的圖像網格，除了左側列和右側列以外，每邊都有20像素邊距。

應該看起來像這樣：

| img | | IMG | | IMG | | IMG |

| img | | IMG | | IMG | | IMG |

| img | | IMG | | IMG | | IMG |

HTML：

</div> 
    <div class="break"> 

    </div> 
    <div class="img"> 

    </div> 
    <div class="break"> 

    </div>  
    <div class="img"> 

    </div> 
    <div class="break"> 

    </div>  
    <div class="img"> 

</div> 
<br> 
<div class="gallery"> 
    <div class="img"> 

    </div> 
    <div class="break"> 

    </div> 
    <div class="img"> 

    </div> 
    <div class="break"> 

    </div>  
    <div class="img"> 

    </div> 
    <div class="break"> 

    </div>  
    <div class="img"> 

    </div> 
</div> 

繼承人的CSS：

.gallery { 
width: 1020px; 
background: rgba(255, 255, 255, 0); 
margin: 0 auto; 
} 

.gallery .img { 
width: 240px; 
height: 240px; 
background: #FFF; 
margin: 0 auto; 
-moz-box-shadow: 0 10px 30px rgba(0, 0, 0, 0.3); 
-webkit-box-shadow: 0 10px 30px rgba(0, 0, 0, 0.3); 
box-shadow: 0 10px 30px rgba(0, 0, 0, 0.3); 
float: left; 
} 

.gallery .break { 
height: 240px; 
width: 20px; 
float: left; 
} 

.break_long { 
height: 20px; 
width: 1020px; 
background-color: solid black; 
} 

Answer 1

使用下面的代碼。我希望這是對您有用：

HTML 

     <div class="gallery"> 
      <div class="img"> 

      </div> 
      <div class="img"> 

      </div> 
      <div class="img"> 

      </div> 
      <div class="img"> 

      </div> 
     </div> 
     <div class="gallery"> 
      <div class="img"> 

      </div> 
      <div class="img"> 

      </div> 
      <div class="img"> 

      </div> 
      <div class="img"> 

      </div> 
     </div> 
     <div class="gallery"> 
      <div class="img"> 

      </div> 
      <div class="img"> 

      </div> 
      <div class="img"> 

      </div> 
      <div class="img"> 

      </div> 
     </div> 



    CSS 



    .gallery{ 
    width:auto; 
    display:inline-table; 
    float:left;background:#000; 
    } 

    .gallery:first-child > div.img{ 
    margin-top:20px; 
    } 

    .gallery > div.img{ 
    width:240px; 
    height:240px; 
    margin-left:10px; 
    margin-right:10px; 
    margin-bottom:20px; 
    background:#fff; 
    float:left; 
    } 
    .gallery > div.img > img{ 
    width:100%; 
    height:auto; 
    } 
    .gallery > div.img:first-child { 
    margin-left:20px; 
    } 
    .gallery > div.img:last-child { 
    margin-right:20px; 
    } 

輸出地說：