Выровнять нижний обернутый текст слева от изображения

Question

Im пытается поместить некоторый текст слева от изображения. Внутренний блок не достаточен, потому что, если строка достаточно длинная, она просто сдвигает изображение вниз.

Цель состоит в том, чтобы иметь контейнер с фиксированной шириной, который содержит изображение справа, и текст, заполняющий левый, который обертывается, если он достаточно длинный, а вертикально выровнен по низу.

У меня есть начальный пример использования поплавков:

.container { 
 
    width: 200px; 
 
} 
 
.container img { 
 
    width: 60px; 
 
    height: 60px; 
 
    float: right; 
 
} 
 
.container h1 { 
 
    font-size: 15px; 
 
}

<div class="container"> 
 
    <img src="//placehold.it/60x60"/> 
 
    <h1>Text Text Text Text Text</h1> 
 
</div>

Проблема с этим состоит в том, что текст вертикально к вершине. Я хочу, чтобы он был выровнен по низу. Я пробовал все, и я просто не могу заставить его работать. Есть идеи?

Answer 1

jsFiddle demo

инвертировать порядок ваших дочерних элементов и попробовать этот CSS (который эмулирует использование таблицы элементы)

.container{ 
 
    display:table; 
 
    width: 200px; 
 
} 
 
.container > *{ /* target immediate children */ 
 
    display:table-cell; 
 
    vertical-align:bottom; 
 
} 
 
.container img { 
 
    width: 60px; 
 
    height: 60px; 
 
} 
 
.container h1 { 
 
    font-size: 15px; 
 
}

<div class="container"> 
 
    <h1>Text Text Text Text Text</h1> 
 
    <img src="//placehold.it/60x60" /> 
 
</div>

_{PS : SEO (Search-E ngine-Optimization) - это не самая лучшая идея иметь больше одного <h1> внутри страницы. Использовать h1 с умом;)}