使用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]

我希望文本显示为正常的段落块。

[image] [testttt
         ttttttt]

Answer 1

您好@Eggy请找fiddle

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

Answer 2

一种简单的方法是删除绝对定位并给出img和文本内联块显示。您可能还想删除段落的宽度或增加它：JS Fiddle

CSS

img {
    display: inline-block;
}
.p1 {
    display: inline-block;
    height: 50px;
    width: 300px;
    top: 40%;
    left: 70%;
}