Адаптив. Как сверстать такие блоки?

Question

[massef]

Здравствуйте.


Меня интересуют последние две карточки в адаптивном примере, как будет правильней сменить им ширину?
Пока вижу варианты:
1. Задать двум последним карточкам заранее подготовленные классы и эти классы прописать в нужном media queries.
2. :nth-child

Какие есть еще варианты?

Answer 1

[teotlu]

А зачем вам ещё варианты? :nth-child и :nth-last-child прекрасно справятся с задачей.
Думаю, что ещё с помощью flexbox можно замутить, но :nth-child покроссбраузернее будет, мягко говоря.
Действительно, можно (пример в разделе A Quickie Example).

Comments

[htmleater]

На начало года поддержка флексбокса была у 93-х% пользователей. А так да, это делается за 15 минут во флексбоксе.

[teotlu]

htmleater: просто мы, к примеру, поддерживаем IE9, а адекватного полифилла для флексбокса нет. С другой стороны, в данном случае можно для IE9 просто отображение инлайн-блоками сделать.
А с третьей стороны, с :nth-child в данном случае это делается за 5 минут :)

[htmleater]

teotlu: У нас в конторе 9-ку поддерживают чисто номинально и я пишу отдельный файл стилей для неё с дисплей: табле и т.д. или просто инлайнами, благо под неё респонсив не нужен. Единственное, что нельзя в ней сделать - сортировку вывода итемов.

[teotlu]

htmleater: ну да, с флексом это делается легко и быстро, а без него только перестановкой.