Html 带内联文本的图像并停止文本换行

我认为这可以通过浮动图像来实现，但我想看看我是否也可以使用我在这个网站上看到的建议答案来实现。即在图像和span标记上使用

inline block

，并使用垂直对齐将文本放置在图像旁边

我遇到的问题是，如果我在

span

标记后添加了一个段落，或者在

span

标记内放置了太多的单词，那么所有的文本都会在图像下方换行。当我使用一个段落时，我尝试了不同的属性，但那不行

JSFIDLE是

.iconswapper{
背景颜色：桃花；
保证金：自动；
高度：150像素；
边缘顶部：15px；
宽度：90%；
文本对齐：居中
}
.其他信息{
线高：2米；
字号：1.5em
}
wrapcon先生{
文本对齐：左对齐；
宽度：75%；
背景色：#F6F6F6；
填充：3px0.5px；
左边距：10%；
}
.图标img{
宽度：60px；
高度：50px；
显示：内联块；
垂直对齐：中间对齐
}
.I康蒂尔{
字体大小：1.1米；
显示：内联块；
垂直对齐：顶部
}

其他服务
鸭子清洗。如果你需要一只鸭子。鸭子清洗。如果你需要一只鸭子。鸭子清洗。如果你需要一只鸭子。。。

添加以下CSS规则：

.icon {
  display:flex;
}

请参阅以下代码：

.iconswapper{
背景颜色：桃花；
保证金：自动；
高度：150像素；
边缘顶部：15px；
宽度：90%；
文本对齐：居中
}
.其他信息{
线高：2米；
字号：1.5em
}
wrapcon先生{
文本对齐：左对齐；
宽度：75%；
背景色：#F6F6F6；
填充：3px0.5px；
左边距：10%；
}
.图标img{
宽度：60px；
高度：50px；
显示：内联块；
垂直对齐：中间对齐
}
.I康蒂尔{
字体大小：1.1米；
显示：内联块；
垂直对齐：顶部
}
.图标{
显示器：flex；
}

其他服务
鸭子清洗。如果你需要一只鸭子。。。鸭子清洗。如果你需要一只鸭子。。。鸭子清洗。如果你需要一只鸭子。。。鸭子清洗。如果你需要一只鸭子。。。鸭子清洗。如果你需要一只鸭子。。。

如果从跨度中取出图像的宽度，

计算（100%-68px）

，它将按预期工作，否则，跨度将增长到填充其父宽度，因此会断开线

.iconswapper{
背景颜色：桃花；
保证金：自动；
高度：150像素；
边缘顶部：15px；
宽度：90%；
文本对齐：居中
}
.其他信息{
线高：2米；
字号：1.5em
}
wrapcon先生{
文本对齐：左对齐；
宽度：75%；
背景色：#F6F6F6；
填充：3px0.5px；
左边距：10%；
}
.图标img{
宽度：60px；
高度：50px；
显示：内联块；
垂直对齐：中间对齐
}
.I康蒂尔{
字体大小：1.1米；
显示：内联块；
垂直对齐：顶部；
宽度：计算（100%-68px）；
}

其他服务
鸭子清洗。如果你需要一只鸭子。。。
鸭子清洗。如果你需要一只鸭子。。。
鸭子清洗。如果你需要一只鸭子。。。
鸭子清洗。如果你需要一只鸭子。。。

您可以使用支持IE8+浏览器的CSS表格，将容器设置为

display:table

，将列设置为

display:table cell

顺便说一下，您的HTML缺少一个

，请确保修复该问题

.iconswapper{
背景颜色：桃花；
保证金：自动；
高度：150像素；
边缘顶部：15px；
宽度：90%；
文本对齐：居中
}
.其他信息{
线高：2米；
字号：1.5em
}
wrapcon先生{
文本对齐：左对齐；
宽度：75%；
背景色：#F6F6F6；
填充：3px0.5px；
左边距：10%；
}
.图标{
显示：表格；
宽度：100%；
}
博士，
.I康蒂尔{
显示：表格单元格；
垂直对齐：顶部；
}
博士{
宽度：60px；
高度：50px；
}
.I康蒂尔{
字体大小：1.1米；
左边距：4倍；
}

其他服务
鸭子清洗。如果你需要一只鸭子。鸭子清洗。如果你需要一只鸭子。鸭子清洗。如果你需要一只鸭子。。。

什么是用于计算的polyfill。。。对于JavaScript方法（跨浏览器兼容性）？@AlexanderDixon因为一直工作到IE9，所以使用polyfill没有任何意义。。。尽管这里有一个：