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

【问题标题】：How to put an image at the left side of text without putting the image into css如何在不将图像放入css的情况下将图像放在文本的左侧
【发布时间】：2015-01-12 07:59:11
【问题描述】：

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

我可以使用图像，我可以使用 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会产生如下图：

【问题讨论】：

this is the closest one but still not what I want. 那你想要什么？
您使用其他哪种语言来设置img src？
@Mouser 我正在使用 javascript 和 jquery，但是这部分是静态的，所以可能不需要。服务器端由 Salesforce 控制，所以我无法控制

标签： html css

【解决方案1】：

您应该浮动两个 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;：

NEW FIDDLE

【讨论】：

并且不要忘记将overflow: hidden; 添加到包装元素以修复清除。
谢谢你。但还有一个问题。文本与图像顶部对齐。有没有办法让它与中心对齐？
谢谢你。对我来说很好。

【解决方案2】：

您也可以尝试 display:inline 使 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

【讨论】：

感谢您的回答。由于 jmore 的答案更早更全面，我将其标记为最佳答案。并为此加 1。