0

我有一排 div，每个都包含一个图像。图像height设置100%为每个图像，每个图像div都有一个padding-leftof 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%;
    }
4

4 回答 4

1

你的 CSS 中有这个

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

border-box意味着一个元素的大小是它的高度/宽度和它的填充。因此，如果您的图像高 100 像素，顶部和底部填充 10 像素，它只会显示为 80 像素高。这就是导致您的问题的原因。

另一种方法是content-box，将填充添加到高度或宽度上。所以 100px + 10px 的顶部和底部填充将是 120px 高。

解决它的一种方法是制作 div 内容框，并因此稍微变窄（以补偿增加的填充宽度）​​。

[class*='col-'] {
    box-sizing: content-box;
    -moz-box-sizing:content-box;
}
.col-1-4 {
    width: 23%;
}
于 2013-08-12T13:33:09.697 回答
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/

于 2013-08-12T13:33:55.247 回答
0

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

移除边框：

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

边距而不是填充：

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

于 2013-08-12T13:28:56.183 回答
0

Paul 的回答当然有效，但是您可能需要考虑通过重新处理来提高/缩短 CSS 的兼容性。那些 *col 通配符选择器在 IE8 或更早版本中不起作用

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

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

以上会给你同样的效果

于 2013-08-12T14:01:00.137 回答