css - 如何对齐 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