css - 使用 CSS 将文本对齐到图像的右侧？

Question

我正在尝试将文本对齐到图像的右侧；

CSS

.p1 {
position: absolute;
    width: 100px;
    height: 50px;
    top: 40%;
    left: 70%;; 
}

html

<img src=../images/diagram1.png alt="Diagram"/>
<span class="p1">This is a testtttttttttttttttttttttttttttttt </span>

该代码适用于少量文本，但对于大量文本，它会被压缩并形成一个非常长的段落。这就是我的意思；

[image] [tes
         ttt
         ttt
         tt]

我希望文本显示为普通段落 block 。

[image] [testttt
         ttttttt]

Answer 1

嗨@Eggy 请找到fiddle

.container{
    width:100%;
    overflow:hidden;
}
.container img{
    display:inline-block;
    margin-right:20px;
    float:left;
}