CSS 2x3網格佈局問題

Question

我正在嘗試實現一個2x3網格佈局的問題。 http://johns-webdesign.com/portfolioV2/電網需要看起來像這樣：

X | X | X 
X | X | X 

正如你所看到的，申報單的一個似乎只是浮在網格佈局下。沒有去css表，我只是無法弄清楚如何解決這個問題。

HTML

<div id="content"> 
    <div id="metro_left"> 
     <h1 style="color: #f7a70e">Here is some of my latest work</h1> 
     <div id="latest_work_gallery"><img src="images/current_work.jpg" width="250" height="250" /> 
      <div class="image_caption"><a href="#">mX Fabrications</a></div> 
     </div> 

     <div id="latest_work_gallery"><img src="images/current_work.jpg" width="250" height="250" /> 
      <div class="image_caption"><a href="#">mX Fabrications</a></div> 
     </div> 

     <div class="content_spacer_down"></div> 

     <div id="latest_work_gallery"><img src="images/current_work.jpg" width="250" height="250" /> 
      <div class="image_caption"><a href="#">mX Fabrications</a></div> 
     </div> 

     <div id="latest_work_gallery"><img src="images/current_work.jpg" width="250" height="250" /> 
      <div class="image_caption"><a href="#">mX Fabrications</a></div> 
     </div> 

     <div id="latest_work_gallery"><img src="images/current_work.jpg" width="250" height="250" /> 
      <div class="image_caption"><a href="#">mX Fabrications</a></div> 
     </div> 

     <div id="latest_work_gallery"><img src="images/current_work.jpg" width="250" height="250" /> 
      <div class="image_caption"><a href="#">mX Fabrications</a></div> 
     </div> 

    </div> 

</div> 

CSS：

#content { 
    width:1200px; 
    height:580px; 
} 
#metro_left { 
    padding:0;margin:0;float:left; 
    width:800px; 
    height:560px; 
} 
#latest_work_gallery { 
    position:relative; 
    float:left; 
    width:250px; 
    height:250px; 
    margin:5px; 
    border:1px solid #333; 
    background-color: #f7a70e; 
} 
#latest_work_gallery:hover { 
    margin:10px; 
    -webkit-transform: scale(1.1); 
    -moz-transform: scale(1.1); 
    -ms-transform: scale(1.1); 
    -o-transform: scale(1.1); 
    transform: scale(1.1); 
    filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(sizingMethod='scale')alpha(opacity = 100); /*For IE 8 and less */ 
} 
.image_caption { 
    clear:both; 
    position: absolute; 
    left:0px; 
    bottom: 0; 
    padding: 5px 15px; 
    width:220px; 
    font-size: 18px; 
    line-height: 24px; 
    background-color:#56FB39; 
    opacity:0.8; 
} 
.image_caption a{color:#000;} 

我試圖切換花車，只是反映了問題。還試圖清除左，右或兩者。無砧

Answer 1

刪除：

<div class="content_spacer_down"></div> 

Answer 2

你有兩個div，然後.content_spaver_down然後4個格。重新安排訂單。

<div id="content"> 
     <div id="metro_left"> 
      <h1 style="color: #f7a70e">Here is some of my latest work</h1> 
      <div id="latest_work_gallery"><img src="images/current_work.jpg" width="250" height="250" /> 
       <div class="image_caption"><a href="#">mX Fabrications</a></div> 
      </div> 

      <div id="latest_work_gallery"><img src="images/current_work.jpg" width="250" height="250" /> 
       <div class="image_caption"><a href="#">mX Fabrications</a></div> 
      </div> 

      <div id="latest_work_gallery"><img src="images/current_work.jpg" width="250" height="250" /> 
       <div class="image_caption"><a href="#">mX Fabrications</a></div> 
      </div> 

      <div class="content_spacer_down"></div> 

      <div id="latest_work_gallery"><img src="images/current_work.jpg" width="250" height="250" /> 
       <div class="image_caption"><a href="#">mX Fabrications</a></div> 
      </div> 

      <div id="latest_work_gallery"><img src="images/current_work.jpg" width="250" height="250" /> 
       <div class="image_caption"><a href="#">mX Fabrications</a></div> 
      </div> 

      <div id="latest_work_gallery"><img src="images/current_work.jpg" width="250" height="250" /> 
       <div class="image_caption"><a href="#">mX Fabrications</a></div> 
      </div> 



     </div> 

    </div> 

Answer 3

你已經放置了前兩個塊之後。由於它們正確地浮動，所以缺少一個塊。刪除上面的div或移動它，所以它會出現在前三個div。