Как сверстать данный блок без медиа — выражений?

Question

[indeveloping]

Пытаюсь сверстать адаптивное email - письмо. Есть вот такой блок:

При 540 и выше элементы должны перестраиваться в ряд.

Можно ли такое сделать без медиа - выражений? Я не нахожу иного способа. А с медиа - выражениями ничего не выходит. Gmail и Yandex их стили тупо не хотят наследовать.

Answer 1

[Иван Клименко]

Используйте flexbox'ы с указанием минимальной ширины и переносом

Comments

[indeveloping]

Флексы нельзя использовать в мейл клиентах. Яндекс к примеру даже медиа выражения не поддерживает в письмах, не то что флексы.

[Одиночка Айс]

Лол, когда флексобэмовая херня головного мозга...

Answer 2

[apoca1ipsis]

Без медиа как вариант так. Но единственный косяк, при определённой ширине, будет 2 блока на 1 строке.

.list {
  max-width: 810px;
}

.item {
  display: inline-block;
  width: 30%;
  min-width: 266px;
}

Comments

[indeveloping]

30% должны занимать только при 540 и выше. А до 540 должны занимать 100%. Т.е тут всё равно медиа нужны чтобы ширину поменять.

[apoca1ipsis]

indeveloping,
Примерный расчёт я вижу так:
При ширине менее 540px должно быть в одну строку, значит минимальная ширина элемента min-width: 271px.
Но т.к. у inline-block есть свои пробелы в примере написал 266px.
min-width - переназначит 30%.

[indeveloping]

apoca1ipsis, примено так, а при 540 и выше ширина уже 160 - 162px, т.е 30 - 32% там получается.

[apoca1ipsis]

indeveloping, нет. 160 - 162 быть не может, т.к. вы указали min-width: 266px.

[apoca1ipsis]

Пример

[indeveloping]

apoca1ipsis, я в своём примере цифры не приводил. Из примера видно что до 540 элемент занимает всю ширину вьюпорта, а при 540 и выше его ширина фиксирируется на 30-32% т.е при ширине обёртки в 540px, каждый элемент будет занимать 160-180px. Вёрстка фиксированная, дальше 540 не тянется.

[apoca1ipsis]

Такое моё видение решения задачи без медиа. Возможно я и не прав, и есть решение лучше.

[Одиночка Айс]

apoca1ipsis, чтобы не было "пробелов", родителю нужно задавать font-size: 0