简体   繁体   English

在CSS的同一行上显示多行文本和图像

[英]Display multi-line text and image on the same row in CSS

How do you do that? 你是怎样做的? For example, if my text is too long, it should auto-wrap but the entire text should still be on the same row as the image. 例如,如果我的文本太长,它应该自动换行,但整个文本仍应与图像位于同一行。 Something like: 就像是:

+------+
|image | text, text, text
|      | and more text
+------+

Is it possible? 可能吗? I tried: 我试过了:

 <img src="http://placehold.it/100" /><span style = "display:inline">text, text, text, text, text, text, text, text, text, text, text, text, text, text, text, text, text, text, text, text, text, text, text, text and more text</span> 

But all it does is to wrap the exceeding text to the row below both the image and the text. 但是,它所做的就是将多余的文本包装到图像和文本下方的行中。

Thanks! 谢谢! Sorry if my explanation is not clear, as I cannot post images. 如果我的解释不清楚,很抱歉,因为我无法发布图片。

You can achieve this by adding float:left to the elements ( both img and text ). 您可以通过向元素(img和text)添加float:left来实现这一点。

Code: 码:

<img style="float:left" src = "image.png" />
<span style = "float:left">text, text, text and more text</span>

声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.

 
粤ICP备18138465号  © 2020-2024 STACKOOM.COM