Как позиционировать в зависимости от разного контента?

Question

[Артур]

Привет!
Есть макет prntscr.com/e9i1ri
реализую блок задачи codepen.io/Cloudst1/pen/RKORXJ?editors=1100
возник вопрос, как прижать синий заголовок .task_title к верху родителя (чтобы первая буква граничила без невидимого внутреннего отступа в несколько пикселей)
а зеленый параграф к низу родителя (так же по базовой своей линии)

при этом если нет блока описания .task_text, центрировать .text_title по вертикали родительского блока

Answer 1

[Сергей Горячев]

display: flex и нет проблем

Comments

[Артур]

да, видел решения на флексбоксах, пока учусь
хотелось бы обойтись без них или узнать все варианты решения
спасибо за ответ

[Петр]

Артур: вот тебе в помощь html5.by/blog/flexbox

[Артур]

Peterko: спасибо
как варианты решения задачи есть без применения флексбоксов?

[Сергей Горячев]

Артур: таблицы, инлайн блоки, хернь это всё)

[Алексей Бурлака]

Артур: Sergey Goryachev: flex получил поддержку 97.5%, а без Осла 100%, можно смело использовать и агитировать.
caniuse.com/#feat=flexbox

[Сергей Горячев]

Алексей Бурлака: Спасибо, да я как бы в курсе) Поэтому с прошлого года уже перевел свою верстку на флексы и смело советую на тостере их)

[Алексей Бурлака]

Sergey Goryachev:

>>> flex поддержка 97.5%
«Спасибо, да я как бы в курсе»

>>> calc поддержка: 84.24%
«...У флекс такая же поддержка. Даже меньше, чем у calc.»

[Сергей Горячев]

Алексей Бурлака: Ааа, где-то перепутал малость)

[Алексей Бурлака]

Sergey Goryachev:
Я ж из добрых побуждений.
Дам знать, так сказать =)

[Артур]

Алексей Бурлака: спасибо
а как такие задачи решались до поддержки флексов? хотелось бы увидеть варианты и примеры решения

[Алексей Бурлака]

Артур: Не буду лукавить, не въезжаю на все 100% в задачу. Видимо сбивает то, что я пытаюсь состыковать и макет и ваш пример вёрстки.

Смотрю только на макет.
Как я понял, нужно чтобы «Design on boarding ...» был прижат к верху картинки, а «Discuss with...» — книзу. Тогда моя задача — сделать так, чтобы картинка держала блок, а обе надписи — position: absolute, верхняя с top: 0, нижняя с bottom: 0;

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

[Сергей Горячев]

Артур: Ну, не хочешь делать современно, делай как в начале 2000-х.
https://jsfiddle.net/oozwLmc3/
Это конечно уже давно устаревший метод, но раз ты такой упертый, спорить смысла не вижу)

[Сергей Горячев]

Артур: Картинку соответственно загоняешь через background-image, а строки выравниваешь через line-height, чтобы начало надписи было в начале картинки и так далее.

[Артур]

Алексей Бурлака:
Задача понята верно
собственно вот что сейчас выходит codepen.io/Cloudst1/pen/JEVdvg (заголовки не отцентрированы относительно родителя, а должны, если нет описания ниже)

"прописать этой строке особый css-класс"
да как 1 из вариантов тоже думал об этом, искал решения вроде того что написал Sergey Goryachev Сергей, чтобы именно в зависимости от самого контента без добавления сторонних классов

[Артур]

Sergey Goryachev: Спасибо! как вариант решения, то что нужно.
По мимо таблиц и флексов существуют еще варианты решения?

[Сергей Горячев]

Артур: Конечно. Абсолютное позиционирование https://jsfiddle.net/oozwLmc3/1/

[Артур]

Sergey Goryachev:
теперь понимание позиционирования стало лучше :), благодарю!
цель: выравнивать в зависимости от контента достигнута codepen.io/Cloudst1/pen/RKORXJ

[Алексей Бурлака]

Артур: Так себе результат. Постарайтесь сделать без transform и calc. Тем более что:
«выравнивать в зависимости от контента достигнута»
===
не достигнута. Меняем высоту .task_content (например, картинка внутри попалась выше или задача пришла сделать в подпись в четыре строки) и видим, что всё висит намертво, без изменений.

Answer 2

[display: block]

Таблица codepen.io/anon/pen/ZLZJYW