0

我正在尝试完成的 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;}

我尝试切换花车，只是反映了这个问题。还试图清除左，右或两者。无砧

4

3 回答 3

2

删除：

<div class="content_spacer_down"></div>
于 2013-03-14T20:04:39.683 回答
0

你有两个 div，.content_spaver_down然后是 4 个 div。重新排列顺序。

   <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>
于 2013-03-14T20:07:02.060 回答
0

您已经将前两个块放在了后面。由于它们向右浮动，因此缺少一个块。删除上面的div或者移动它，这样会出现在前三个div之后。

于 2013-03-14T20:07:07.110 回答