Html 强制图像旁边的文本块

你好，我有一张图片，想在旁边显示文字。因此，我将文本放在

元素中，并将其设置为

display:inline block

。我还将div和img设置为

vertical align:middle

现在，文本中的

元素可以正常工作，但如果一行太长，则整个文本块将放在图像下方。我能强迫它在同一条线上，然后换行吗？

---

当然，我可以使用“最大宽度”来确保它符合直线，但事实是，我无法计算img的宽度。或者我可以让它占据剩下的部分吗？

将CSS属性

float:left

添加到图像中，并将

float:right

添加到文本框（div）中。CSS属性

显示：内联块

也必须添加。CSS属性

垂直对齐

不适用于浮动。改为使用display flex，并将CSS属性“对齐项目：居中”设置为垂直对齐。

将此结构用于图像前面的文本以及文本转到第二行时图像下面的文本开始。如果你想让文本每次停留在图像的前面，那么添加样式p标记溢出：隐藏

<div style="overflow: hidden">
    <img style="float: left" src="images/imageName.png">
    <p>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s,</p>
</div>

Lorem Ipsum只是印刷和排版行业的虚拟文本。自16世纪以来，Lorem Ipsum一直是行业标准的虚拟文本

与其描述代码，不如共享代码。。。这似乎是一个浮动用例共享您的代码PLZ帮助我改进我的答案为什么添加了溢出属性？有趣的是，溢出还将创建一个新的块格式上下文，如果我们想将块元素与浮动元素对齐，这是很有用的。在下面的示例中，我们展示了默认情况下许多段落将如何与浮动图像交互，然后使用overflow:hidden将文本对齐到其自身框中：