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%,所以,我相信三幅图像确实应该排成一行。>
奇怪的是,当我单击“扩展代码段”时,我最终得到了两行,每行包含三个图像。
这是怎么回事?
答案 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>