如何在不将图像放入css的情况下将图像放在文本的左侧

Question

我的方案是在网页中实现如下所示的部分：

我可以使用图像，我可以使用CSS。但是当我在Salesforce中工作时，很难将图像放入css文件或部分，这意味着我不能像这样使用css代码：

.wStatusCompleted {
    background: #DBFBD6 url(../img/wizardCompleted.png) 20px 16px no-repeat;    
}

其他一切都很好但是将图像的url放在css中会导致找不到资源。所以我试图通过html方式实现它，这就是我尝试过的方法：

<div style="float:left">
    <img src="{!$Resource.wizardCompleted}"/>
</div>
<div>
    <span style="font-size:18px;margin-bottom:20px;"> Completed</span>
    <br />
    <span>Well done, you have successfully completed this request and received payment.</span>
</div>

我尝试了几件事情，这是最接近的事情，但仍然不是我想要的。有什么建议？

修改

要回答评论，上面的html会产生如下图所示的图像：

Answer 1

你应该漂浮你的两个div，而不仅仅是包裹图像的div：

<div style="float:left;">
   <img src="http://www.placecage.com/50/50"/>
</div>
<div style="float:left;">
    <span style="font-size:18px;margin-bottom:20px;"> Completed</span><br/>
    <span>Well done, you have successfully completed this request and received payment.</span>
</div>

请务必使用overflow:hidden或父元素上的clearfix或（如果没有父元素）清除您的浮点数，方法是将空元素集添加到clear:both。这似乎有效，但由于float:left

，您的第二个容器实际上位于图像后面

FIDDLE

要对齐中间的文字，只需使用display:inline-block代替float:left，然后为vertical-align:middle;设置{{1}}：

NEW FIDDLE

Answer 2

您还可以尝试显示：内联使img的行为类似于文本元素。

<img src="http://png.findicons.com/files/icons/985/affel/128/tick.png" style="display:inline-block;"/>
<div style="display:inline-block; vertical-align:top; margin-top:2em;">
  <span style="font-size:18px;margin-bottom:20px;">Completed</span><br/>
  <span>Well done, you have successfully completed this request and received payment.</span>
</div>

Fiddle to play with