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;}

我尝试切换浮动，只是反映问题。还尝试清除左，右或两者。没有铁砧

Answer 1

删除：

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

Answer 2

你有两个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>

Answer 3

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

CSS 2 x 3网格布局问题

3 个答案: