我已经创建了以下演示来展示我的问题:
http://francisbaptiste.com/nov17/
每个div的宽度为33.33%。在div内是100%宽度的图像。我希望它是一个完美的图像网格,但div的高度总是略高于图像的高度。
不应该根据图像的高度来设置div的高度吗?那么为什么底部有那么一点空间呢?
答案 0 :(得分:9)
差距来自图片标签后面的实际空白。您可以使用它来修复它:
.card img {
display: block;
}
或者更糟糕的解决方案:
.card {
font-size: 0;
}
答案 1 :(得分:1)
我认为问题是外部div的高度,你不能使用auto,因为浏览器可能对div及其内部内容有一些默认操作。相反,我指定高度的百分比并解决了问题
.card {
width: 33.333%;
height: 50%;
overflow: hidden;
float: left;
background: black;
color: white;
}
这对你有意义吗?