Question

您好，我有一张图片，想在其旁边显示文字。因此，我将文本放在<div>元素内，并将其设置为display:inline-block。我也将div和img都设置为vertical-align:middle 现在，文本中的<br>元素可以正常工作，但是如果一行太长，则会将整个文本块放置在图像下方。我能以某种方式强迫它处于同一行并换行吗？当然，我可以使用max-width来确保它适合该行，但是事实是，我无法计算img的宽度。还是我可以以某种方式使其占用其余的行？

Answer 1

在图像中添加CSS属性float:left，在文本框（div）中添加float:right。还必须添加CSS属性display:inline-block。 CSS属性vertical-align不适用于float。改用display flex并将CSS属性align-items:center设置为垂直对齐。

Answer 2

将此结构用于图像的文本开头，当文本移至第二行时，文本在图像下方开始。如果您想让文本每次都停留在图像前面，而不是添加样式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>

强制图像旁边的文本块

2 个答案: