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

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>

Answer 2

只需将图片放在文字前面即可：

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

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

Answer 3

将以下 css 添加到您的 img 标签：vertical-align: middle;

看到这个JSFiddle

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

Text to left and image to right within same tag

html

css

liquid

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

Text to left and image to right within same tag

html

css

liquid

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