Как мне выровнять тексты и изображения внутри 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>

Извините, обновленное решение ... Вот рабочая ссылка

Answer 2

Вы можете попытаться поиграть с вертикальным выравниванием, но это своего рода зло ... я обычно использую абсолютную позициюВы можете проверить себя в W3C Tryit Editor