Как переносить div-элементы на новую строку, если они становятся слишком узкие?

Question

[Сева Жидков]

Вроде с версткой все хорошо.

.content>.news{
  width : 73%;
  margin : auto 15%;
}

.content>.news>.card>article{
  float : left;
  text-align : center;
  width : 20%;
  color : #fff;
  background-color : #4A90E2;
  padding : 1%;
  margin : 1%;
}

Но при уменьшении окна браузера происходит вот так:
Пробовал min-width: или не получилось, или я что-то сделал неправильно.
Проверял в Safari, Chrome.

Answer 1

[Вадим Белкин]

Через media. С адаптивной вёрсткой знакомы? Она вам и нужна.

Comments

[President42]

да тут min-width достаточно проставить, вы что

[Вадим Белкин]

при min-width в мелком контейнере могут быть справа большие отступы, равные 99% min-width, что собственно не очень красиво смотрится. по этому думаю, лучше делать переходы через адаптивность

Answer 2

[Incher]

Попробуйте дочерним div'ам прописать display:inline-block.

Comments

[Сева Жидков]

Не помогло

[President42]

Вообще не о том

Answer 3

[President42]

.content>.news{
  width : 73%;
  min-width: 400px; /* Минимальная ширина блока */
  margin : auto 15%;
}