为什么3个宽度均为33%的图像都不能适合div?

时间:2018-11-01 21:29:37

标签: css position width

img {
  display:inline-block;
  width: 33%;
  margin: 0;
  padding: 0;
}

div {
    padding: 0;
}
<div>
    <img src="https://upload.wikimedia.org/wikipedia/commons/a/a6/U%2B25C9.svg"/>
    <img src="https://upload.wikimedia.org/wikipedia/commons/a/a6/U%2B25C9.svg"/>
    <img src="https://upload.wikimedia.org/wikipedia/commons/a/a6/U%2B25C9.svg"/>
    <img src="https://upload.wikimedia.org/wikipedia/commons/a/a6/U%2B25C9.svg"/>
    <img src="https://upload.wikimedia.org/wikipedia/commons/a/a6/U%2B25C9.svg"/>
    <img src="https://upload.wikimedia.org/wikipedia/commons/a/a6/U%2B25C9.svg"/>
</div>

如您所见,我们这里有6张图像,每张图像设置为封闭容器宽度的33%。目的是创建两行,每行三个图像。

但是,由于我不知道的原因,当我单击“运行代码段”时,此代码段为我提供了三行,每行两张图像!我不知道为什么,因为据我所知,3 * 33%= 99%小于封闭容器宽度的100%,所以,我相信三幅图像确实应该排成一行。

奇怪的是,当我单击“扩展代码段”时,我最终得到了两行,每行包含三个图像。

这是怎么回事?

1 个答案:

答案 0 :(得分:1)

这是因为内联元素之间有空格(就像单词之间有空格一样)。因此,您需要将其显示设置为阻塞以避免空格,并添加float:left使其保持在同一行。

如果必须绝对保留行内块显示,请看一下这篇文章以删除空格: https://css-tricks.com/fighting-the-space-between-inline-block-elements/

img {
  display:block;
  width: 33.3%;
  float: left;
  margin: 0;
  padding: 0;
}

div {
    padding: 0;
}
<div>
    <img src="https://upload.wikimedia.org/wikipedia/commons/a/a6/U%2B25C9.svg"/>
    <img src="https://upload.wikimedia.org/wikipedia/commons/a/a6/U%2B25C9.svg"/>
    <img src="https://upload.wikimedia.org/wikipedia/commons/a/a6/U%2B25C9.svg"/>
    <img src="https://upload.wikimedia.org/wikipedia/commons/a/a6/U%2B25C9.svg"/>
    <img src="https://upload.wikimedia.org/wikipedia/commons/a/a6/U%2B25C9.svg"/>
    <img src="https://upload.wikimedia.org/wikipedia/commons/a/a6/U%2B25C9.svg"/>
</div>