html - 这个响应式网格可以正确格式化吗

Question

我有一个图像网格，我想像这里的图像一样显示:

不幸的是，底部的行向下推而没有对齐。

我正在改编 Graham Miller 的响应式网格系统，它很棒。这是我到目前为止的代码:

CSS:

/*  SECTIONS  */
    .section {
        clear: both;
        padding: 0px;
        margin: 0px;
    }

    /*  COLUMN SETUP  */
    .col {
        display: block;
        float:left;
        margin: 1% 0 1% 1.6%;
    }
    .col:first-child { margin-left: 0; }

    /*  GROUPING  */
    .group:before,
    .group:after { content:""; display:table; }
    .group:after { clear:both;}
    .group { zoom:1; /* For IE 6/7 */ }


    /*  GRID OF SIX  */
    .span_6_of_6 {
        width: 100%;
    }

    .span_5_of_6 {
        width: 83.06%;
    }

    .span_4_of_6 {
        width: 66.13%;
    }

    .span_3_of_6 {
        width: 49.2%;
    }

    .span_2_of_6 {
        width: 32.26%;
        height: 350px;
    }

    .span_1_of_6 {
        width: 15.33%;
    }

    img {
        width: 100%;
        height: auto;
    }
    /*  GO FULL WIDTH BELOW 480 PIXELS */
    @media only screen and (max-width: 480px) {
        .col {  margin: 1% 0 1% 0%; }
        .span_1_of_6, .span_2_of_6, .span_3_of_6, .span_4_of_6, .span_5_of_6, .span_6_of_6 { width: 100%; }
    }

HTML:

<div class="section group">
    <div class="col span_2_of_6"><img src="images/slices02.png" alt=""/></div>
    <div class="col span_1_of_6"><img src="images/slices02.png" alt=""/></div>
    <div class="col span_1_of_6"><img src="images/slices03.png" alt=""/></div>
    <div class="col span_1_of_6"><img src="images/slices04.png" alt=""/></div>
    <div class="col span_1_of_6"><img src="images/slices05.png" alt=""/></div>
    <div class="col span_1_of_6"><img src="images/slices06.png" alt=""/></div>
    <div class="col span_1_of_6"><img src="images/slices07.png" alt=""/></div>
    <div class="col span_1_of_6"><img src="images/slices08.png" alt=""/></div>
    <div class="col span_1_of_6"><img src="images/slices09.png" alt=""/></div>
</div>
<div class="section group">
    <div class="col span_1_of_6"><img src="images/slices04.png" alt=""/></div>
    <div class="col span_1_of_6"><img src="images/slices05.png" alt=""/></div>
    <div class="col span_1_of_6"><img src="images/slices06.png" alt=""/></div>
    <div class="col span_1_of_6"><img src="images/slices07.png" alt=""/></div>
    <div class="col span_1_of_6"><img src="images/slices08.png" alt=""/></div>
    <div class="col span_1_of_6"><img src="images/slices09.png" alt=""/></div>
</div>
<div class="section group">
    <div class="col span_1_of_6"><img src="images/slices02.png" alt=""/></div>
    <div class="col span_1_of_6"><img src="images/slices03.png" alt=""/></div>
    <div class="col span_1_of_6"><img src="images/slices04.png" alt=""/></div>
    <div class="col span_1_of_6"><img src="images/slices05.png" alt=""/></div>
    <div class="col span_2_of_6"><img src="images/slices02.png" alt=""/></div>
    <div class="col span_1_of_6"><img src="images/slices06.png" alt=""/></div>
    <div class="col span_1_of_6"><img src="images/slices07.png" alt=""/></div>
    <div class="col span_1_of_6"><img src="images/slices08.png" alt=""/></div>
    <div class="col span_1_of_6"><img src="images/slices09.png" alt=""/></div>
</div>

我尝试了几种方法，包括将五张图像的底行向左浮动、稍微调整图像大小以及其他绝望的措施，但都无济于事。

有谁知道如何解决这个问题？

Answer 1

同时实现六列系统和四列系统，完成后，您可以执行以下操作:

<div class="section group"> <!-- First row -->
    <div class="col span_2_of_6"> <!-- left side of row -->
        <div class="col span_6_of_6"> <!-- this is for margin consistency -->
            <img src="" alt=""> 
        </div>
    </div>

    <div class="col span_4_of_6"> <!-- right side of row -->
        <div class="col span_1_of_4"><img src="" alt=""></div>
        <div class="col span_1_of_4"><img src="" alt=""></div>
        <div class="col span_1_of_4"><img src="" alt=""></div>
        <div class="col span_1_of_4"><img src="" alt=""></div>

        <div class="col span_1_of_4"><img src="" alt=""></div>
        <div class="col span_1_of_4"><img src="" alt=""></div>
        <div class="col span_1_of_4"><img src="" alt=""></div>
        <div class="col span_1_of_4"><img src="" alt=""></div>
    </div>
</div>

<div class="section group"> <!-- second row -->
    <div class="col span_6_of_6"> <!-- full row -->
        <div class="col span_1_of_6"><img src="" alt=""></div>
        <div class="col span_1_of_6"><img src="" alt=""></div>
        <div class="col span_1_of_6"><img src="" alt=""></div>
        <div class="col span_1_of_6"><img src="" alt=""></div>
        <div class="col span_1_of_6"><img src="" alt=""></div>
        <div class="col span_1_of_6"><img src="" alt=""></div>
    </div>
</div>

<div class="section group"> <!-- Third row -->
    <div class="col span_4_of_6"> <!-- left side of row -->
        <div class="col span_1_of_4"><img src="" alt=""></div>
        <div class="col span_1_of_4"><img src="" alt=""></div>
        <div class="col span_1_of_4"><img src="" alt=""></div>
        <div class="col span_1_of_4"><img src="" alt=""></div>

        <div class="col span_1_of_4"><img src="" alt=""></div>
        <div class="col span_1_of_4"><img src="" alt=""></div>
        <div class="col span_1_of_4"><img src="" alt=""></div>
        <div class="col span_1_of_4"><img src="" alt=""></div>
    </div>

    <div class="col span_2_of_6"> <!-- right side of row -->
        <div class="col span_6_of_6"> <!-- this is for margin consistency -->
            <img src="" alt=""> 
        </div>
    </div>
</div>

您可能想要添加一些自定义类以更好地控制边距。