元素宽度的总和为 100%，但最后一个元素进入下一行 [重复]

Posted 2023-03-06

【中文标题】元素宽度的总和为 100%，但最后一个元素进入下一行 [重复]

【英文标题】：sum of elements' width is 100% but the last element goes to next line [duplicate]

【发布时间】：2015-06-01 06:31:58

【问题描述】：

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

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

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

有什么问题？

【问题讨论】：

这是因为内联元素（如img 元素）尊重标记中的空白...参见this answer。

【参考方案1】：

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

【讨论】：

其实.. white-space-collapse: discard 目前不支持任何浏览器。似乎也不会很快……w3.org/TR/2010/WD-css3-text-20101005/#white-space-collapsing

【参考方案2】：

imgfloat:left;

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