html - 删除填充时 Div 会缩短

Question

我有一行 div，每个包含一个图像。每个图像的图像 height 都设置为 100% 并且每个 div 都有 padding-left 的 20px，除了没有填充的最后一个 div。因为最后一个 div 没有填充并且 img width 设置为 100%，所以最后一个图像看起来比其他图像高。我想解决这个问题，但我不确定如何解决。

这是一个 jsfiddle 显示问题的可视化表示。

HTML:

 <div class="grid">
        <div class="col-1-4">
            <img src="" />
        </div>
        <div class="col-1-4">
            <img src="" />
        </div>
        <div class="col-1-4">
            <img src="" />
        </div>
        <div class="col-1-4">
            <img src="" />
        </div>
    </div>

CSS:

 img {
        width: 100%;

    }

    *, *:after, *:before {
        -webkit-box-sizing: border-box;
        -moz-box-sizing: border-box;
        box-sizing: border-box;
    }

    body {
        margin: 0px;
    }

    [class*='col-'] {
        float: left;
        padding-right: 20px;
    }

    [class*='col-']:last-of-type {
        padding-right: 0px;
    }

    .grid {
        width: 100%;
        max-width: 940px;
        min-width: 755px;
        margin: 0 auto;
        overflow: hidden;
    }

    .grid:after {
        content: "";
        display: table;
        clear: both;
    }

    .col-1-4 {
        width: 25%;
    }

Answer 1

我会为您的排水沟切换到(基于百分比的)边距，如下所示:

[class*='col-'] {
    float: left;
    margin-right: 4%;
}

[class*='col-']:last-of-type {
    margin-right: 0;
}

.col-1-4 {
    width: 22%;
}

示例:http://jsfiddle.net/sknf7/3/