元素宽度的总和为 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;}

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