html - 在同一个标​​签内，文本向左，图像向右

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

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

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

<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>