Как сделать что бы DIV элементы внутри другого DIV уменьшались в размерах, а не переносились?

Question

[PageUp]

Всем привет!

Есть DIV элемент шириной 100% от ширины браузера.

В него нужно разместить 4 div элемента одинаковой ширины и высоты. Между ними небольшое расстояние. В одну линию. А когда экран уменьшается, необходимо добиться того, что бы все значения внутри этих дивов (картинки, текст) уменьшались тоже. При любом размере экрана, необходимо что бы были в ряд 4 одинаковых DIV элемента, одинаковой ширины и высоты.

сделал так, не работает, прыгает все, и на разном разрешении разный результат.

.otsek{
display:inline-block;
max-width:20%;
margin:3px;
font-size:60%;
padding:10px;
}
.otsek img{
max-width:100%;
}

Comments

[Dima Polos]

Оберните картинку в еще один div

[PageUp]

Dima Polos, ничего не дает. блоки переносятся на новую строку, вместо того что бы уменьшаться в размерах

Answer 1

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

Comments

[PageUp]

Именно так на странице и прописано. Но при изменении размеров браузера, блоки переносятся на новую строку, а не уменьшаются в размерах. Тестирую при таком раскладе: 1 блок картинка, 2, 3, 4 блоки одинаковый текст. 3 блока встают в ряд, 4 переносится вниз и встает по центру под 2 блоком.

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

PageUp, значит не "именно так", потому что у меня код работает.

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

PageUp,

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

PageUp,

[PageUp]

Дали ответ на другом сервисе. Решено.

DIV элемент шириной 100%{ display: flex;}
.otsek{ width: 25%; box-sizing: border-box; }

Может кому то пригодиться. Всем спасибо.

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

PageUp, а в моем ответе что-то было не так?

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

PageUp, код нужно смотреть, перед тем, как говорить, что ничего не работает.

[PageUp]

Сергей Горячев, Адуч@webirus, видимо не полностью увидел ваш ответ где был прописан Flex. Спасибо, работает :)

[PageUp]

Сергей Горячев, да дело в том что я не понял как просматривается код, увидел именно первую вкладку в ответе где прописан лишь HTML. а там оказывается нужно еще выбирать CSS и Java если имеется. Еще не до конца освоился на этом сайте. Спасибо еще раз :)