html - CSS 2x3 网格布局问题

Question

我在尝试实现 2x3 网格布局时遇到了一些问题。 http://johns-webdesign.com/portfolioV2/网格需要如下所示:

X | X | X
X | X | X

如您所见，其中一个 div 似乎漂浮在网格布局下。如果不使用 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;}

我尝试切换 float ，只是反射(reflect)了这个问题。还试图清除左侧、右侧或两者。无铁砧

Answer 1

删除:

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