如何在div中对齐文本和图像？

Question

基本上我有两段文字和一张图片。

<div class="container">
    <span class="title">Text</span>
    <img src="an_image.png" />
    <span class="note">Other Text</span>
</div>

我希望所有元素都位于容器div的底部，标题与左侧对齐，而注释一直在右侧。图像将位于标题旁边，并与标题文本的底部对齐。到目前为止，我使用它的唯一方法是使用相对/绝对位置。有没有办法用CSS做到这一点？

这是我想要完成的图像。我可以更改容器的宽度和高度，标题，图像和注释将正确对齐到底部，左侧和右侧，如下所示：

Answer 1

试试这个

  <style type="text/css">
    .container { vertical-align: baseline; position: relative; border: solid 1px Gray; }
    .note { position: absolute; right: 0; bottom: 0; }
  </style>

  <div class="container">
      <span class="title">Text</span>
      <img src="an_image.png" height="100" width="100" />
      <span class="note">Other Text</span>
  </div>

抱歉，更新了解决方案......这是工作link

Answer 2

你可以尝试使用vertical-align，但它有点邪恶..我通常使用绝对位置。您可以自己在W3C Tryit Editor

上进行测试