元素宽度之和为100％，但最后一个元素为下一行

Question

我在div中有3个<img>个元素：

<div>
   <img style="width: 10%;">
   <img style="width: 80%;">
   <img style="width: 10%;">
</div>

但最后一张图片转到下一行。 div的box-sizing属性为border-box。

问题是什么？

Answer 1

图像和其他内联元素受html中的空格影响。此示例显示删除了空格的html。 http://jsbin.com/qoxedepifi/1/edit?html,css,output。您可以设置忽略空格的display: inline-block; float:left。或者您可以在父元素上设置属性white-space-collapse: discard;。

Answer 2

img{float:left;}

您可以在图像上添加浮动。