Как выровнять подблок по нижней линии двух блоков?

Question

[d'Ivan]

Имеется пример кода Bootstrap 2.3 на scratchpad.io/grumpy-mountain-761

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

Чтобы вне зависимости от размера картинки и длины заголовка кнопки, дата и гео-расположение были "пристёгнуты" внизу.

Пробовал играться с position, bottom, но не получилось - вся вёрстка ломается.

Вот чуток CSS для общего представления:

.align-center {
  text-align: center;
}
.thumbnail a img {
  display: block;
  max-height: 250px;
  margin: 0 auto;
}

Answer 1

[Ксения Михайлова]

Можно сделать их инлайн-блоками с vertical-align: bottom, но тогда верхняя граница будет гулять

Я в таких случаях обычно js присваиваю всем блокам в одной линии высоту одну высоту.

Comments

[d'Ivan]

Нужно чтобы оба блока занимали одинаковую высоту и были расположены на одной линии горизонтально. Что делать если в блоках используются разные изображения и разной длины заголовки ссылок?

[Ксения Михайлова]

Принудительно задавать высоту контейнеру с картинкой и заголовком.
Опять же из практики: джаваскриптом прочесывается одна линия, высоты всех заголовков собираются в массив, потом максимальное значение из этого массива указывается в качестве высоты для всех элементов. Таким образом получается достаточно ровно.

Средствами css - только жестко задавать высоту контейнера (3em для заголовков, допустим). Но в таком случае возникает визуально неприятное пустое место. Но у вас оно и так возникнет, если вы хотите такие разноплановые блоки растягивать во всю высоту.

[d'Ivan]

Ксения Михайлова: спасибо за дельные советы.

Answer 2

[Тимур ТТ]

проблема в высоте блоков. И картинках ... css пришлите.

Comments

[d'Ivan]

Добавил CSS в вопросе. Но свыше этого CSS ничего особого не используется.

[Тимур ТТ]

Роман: Заголовки обрезать, картинкам задать один размер, через css, или js