左侧文本，同一标签内右侧图像

Question

我在将一段文字与应该（我的猜测）的图像对齐在同一标签中时遇到了一些麻烦。

它看起来像这样：（忽略黑条纹）

但目前看起来像这样：

它的HTML是：

<span class="size-chart-disclaimer">If in doubt, measure your similar<br>
 style garment and match our grid. 
<img src="{{'we-use.gif' | asset_url}}"/></span>

，CSS是：

.size-chart-disclaimer img{
float:right;
}

有人能说明实现这一目标的最佳途径吗？

Answer 1

我建议为文本使用标记，然后设置样式。

＆＃13;

＆＃13;

.size-chart-disclaimer img {
  float: right;
}
p {
  width: 240px;
  display: inline-block;
  margin-top: 0px;
}

＆＃13;

<span class="size-chart-disclaimer">
  <p>
  If in doubt, measure your similar
  style garment and match our grid. 
  </p>
  <img src="http://www.placehold.it/50x50"/>
</span>

＆＃13;

＆＃13;

＆＃13;

Answer 2

只需将图像放在文本前面即可完成工作：

＆＃13;

＆＃13;

.size-chart-disclaimer img{
  float: right;
}

＆＃13;

<span class="size-chart-disclaimer">
    <img src="http://www.placehold.it/100x50" /> If in doubt, measure your similar
    <br /> style garment and match our grid.
</span>

＆＃13;

＆＃13;

＆＃13;

Answer 3

将以下css添加到yout img标记：vertical-align: middle;

请参阅 JSFiddle