Css div的内联文本位置

这是现场演示：

这一切都很好，直到文本宽度大于div宽度

如果在那里添加一些文本，行将断开，文本将显示在图像的下方，而不是图像的旁边（如我的第一把小提琴中所示）

在这里您可以看到发生了什么，它的文本宽度高于div容器宽度：

---

有没有办法解决这个问题？

问题在于span的

显示：inline block

。删除它，文本将位于同一行

只需删除

显示：内联块span

元素（）的CSS的code>

有关的更多信息

内联块

：此值导致元素生成内联级块容器。内联块的内部被格式化为块框，元素本身被格式化为原子内联级框

---

为右侧内容指定一个宽度，并将其向右浮动，如下所示：

---

为了获得更清晰的结果，我建议您使用一个类和宽度将内容的左右两侧分开，然后浮动它们以将其并排设置。

无法修复它（至少在Chrome中是如此）。@skimberk1，我在Chrome和Firefox中都测试过它：修复后应该是什么样子？这是你关于同一件事的第三个问题。这只需要一个问题。用一行、两行、三行文字制作几张预览图片。再加上你目前提供的代码，你会得到结果。@thirtydot删除笨拙的注释真是可怜。。。恭喜你滥用权力，我不知道你在说什么。我没有删除任何评论。从你的态度，我当然可以理解为什么你的评论会被版主删除（提示：我不是版主）。@thirtydot好吧。。。我没意见，说得好。但是看，我改变了一个图像，它看起来完全不同。。。为什么会发生这种情况？@Cyclone图像的高度发生了变化，而且

边距顶部：-7px

声明也消失了，这就是容器发生变化的原因。您可以为图像定义宽度/高度，以确保不会发生这种情况。嗯，我真的不想更改图像尺寸。。。如果没有它，这是不可能的吗？@Cyclone当然，只要删除图像上的空白，如果你在编辑器上打开它，你可以看到图形本身的顶部和底部有一个很大的间隙。或者，使用负边距调整空白，尽管不建议这样做，因为图像只会进行负边距调整。虽然它有效，例如。。