Адаптивная вёрстка блоков

326

23 июня 2017, 06:41

Есть некоторый html

<body>
    <div class="div"></div>
    <div class="div"></div>
</body>

Эти два блока на одной строке. У первого блока минимальная длина 400px, у второго 200px. А максимальная длина у обоих должна быть 100%. Как сделать так, чтобы при достижении минимальной длины, блок, который не вмещается, переносился на следующую строку. А предыдущий блок занимал 100%, оставшегося места на первой строке. При том перенесённый тоже занимал 100% пустого места на новой строке.

Прошу учесть, что блоков может быть и не два. Заранее спасибо.

Answer 1

Можно решить через flexbox (если что задавайте flex-grow чтобы регулировать пропорции роста):

.flex { 
  display: flex; 
  flex-wrap: wrap; 
} 
 
.flex__item { 
  height: 40px; 
} 
 
.flex__item--one { 
  min-width: 200px; 
  background-color: red; 
  flex-grow: 1; 
} 
 
.flex__item--two { 
  min-width: 400px; 
  background-color: yellow; 
  flex-grow: 2; 
}

<div class="flex"> 
  <div class="flex__item flex__item--one"></div> 
  <div class="flex__item flex__item--two"></div> 
</div>

Создание сайтов в городе Ивано-Франковск

ПОСЛЕДНИЕ ВОПРОСЫ

Все вопросы

ТОП-10

Все популярные вопросы

how to open images in web pages content by clicking on same page sidebar's link [требует правки]

Link in same web site pages by clicking on it

197

HTML

Переключатель на jquery

Немного представленияБлок поделен на 2 части левая и правая

249

HTML

Плавное появление меню jQuery

Здраствуйте

652

HTML

Вопросы в изучении CSS и каркасов сайта [требует правки]

какой этап обучения посоветуете знаю css html как насчёт более продвинутого типа фреймворки less sass мексины и другое

222