Question

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

以下是 jsfiddle ，其中显示了问题的直观表示。

HTML：

100%

CSS：

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

Answer 1

你的CSS中有这个

-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;

border-box表示元素的大小是其高度/宽度及其填充。因此，如果你的图像是100px高，顶部和底部有10px填充，它只会显示为80px高。这就是造成你问题的原因。

替代方案是content-box，其中填充添加到高度或宽度。所以100px + 10px填充顶部和底部将是120px高。

解决这个问题的一种方法是使div成为内容框，结果稍微缩小（以补偿增加的填充宽度）。

[class*='col-'] {
    box-sizing: content-box;
    -moz-box-sizing:content-box;
}
.col-1-4 {
    width: 23%;
}

Answer 2

我会为你的排水沟切换到（基于百分比的）保证金，如下：

[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/

Answer 3

这是因为你使用box-sizing: border-box;，你可以删除它或使用边距而不是填充。（无论哪种方式，你需要调整你的网格）

删除了边框：

http://jsfiddle.net/sknf7/1/

保证金而不是填充：

http://jsfiddle.net/sknf7/2/

Answer 4

保罗的答案肯定有效，但是您可能需要考虑通过重新处理这一点来提高/缩短CSS的兼容性。那些* col通配符选择器不能在IE8或更早版本中工作

.col-1-4 {
    width: 22%;
    margin-right: 4%;
    float: left;
}

.col-1-4:last-child
{
    margin-right: 0;   
}

以上会给你带来同样的效果

删除填充时Div缩短

4 个答案: