Почему не вмещаются элементы в контейнер?

Question

[Super Star]

У меня в макете 4 элемента в ряд. Ширина каждого элемента 210px и слева и справа margin 17px(между элементами выходил 34px). Макет нарисован по сетке 980px. дело в том что у меня эти элементы не встают в один ряд(4-й перескакивает на новый ряд). Если подсчитать то суммарный размер блоков 840 + марджины 136 = 976.

Я не понимаю по сути есть еще 4px свободных, но они не вмещаются в одну строку О_О. Я набросал примерно.
Гляньте: https://jsfiddle.net/jbwjbxqs/

Answer 1

[Максим]

.smal{
width: 210px;
height: 266px;
margin: 10px;
background-color: blue;
display: inline-block;
}

а вообще если хотите что бы везде так было то указывайте размеры в % https://jsfiddle.net/jbwjbxqs/1/

Comments

[Super Star]

не не пойдёт ибо по макету 17 с каждой стороны. у меня вышло с помощью flex box https://jsfiddle.net/jbwjbxqs/2/ я вот думаю может у display: inline-block оно не вмещается потому что там есть между ними промежутки?

[Максим]

Андрей Рысь: ну да есть у inline-block промежутки их как правило комментируют , для родителя font-size:0; а для парентов font-size:нужный; или если через li то между ними вставляют вот такую фигню и отступы между inline-.... пропадёт

[Максим]

<!----> вот такую фигню вставить между li

[Super Star]

Можно задать вопрос по поводу адаптива? Я не понимаю как это сделать с одной секцией.

У меня структура постов: 4 маленьких и 2 больших, а затем 4 маленьких, 1 большой и 2 маленьких. Дело в том, что я не знаю что и на каких разрешениях экрана писать в медиа-запросы. Я не понимаю что мне нужно уменьшить или увеличить.

На разрешении с 974 до 730 вёрстка ломается. Шаблон верстаю сам для себя. К нему не прилагалось как и что должно выглядеть на 768, 480 и 320.

До 768 у меня не получается, чтобы стояло 4 маленьких потом 2 больших, а затем 4 маленьких, 1 большой и 2 маленьких.

Подскажите что делать? Вот сама проблема:
https://i.stack.imgur.com/lHJLi.jpg

О_о у меня не выходит. можете дать совет?
код: https://jsfiddle.net/jbwjbxqs/4/

[Максим]

Андрей Рысь: ну если вы юзаете flex то вам же доступно order ! в чём проблема подменить их порядок - я просто не совсем понял Изюм вопроса !

[Максим]

Андрей Рысь: для 768px : codepen.io/Geyan/pen/PWapmx?editors=0100 смотрите

[Super Star]

. Shadow: Вот так понятнее? s020.radikal.ru/i717/1702/52/d2cf60498568.jpg

[Максим]

Андрей Рысь: пустой экран по ссылке

[Super Star]

. Shadow: pixs.ru/showimage/1jpg_1506179_25043085.jpg

[Максим]

Андрей Рысь: именно так и есть :

[Super Star]

. Shadow: у меня всё открывается. что 1-я ссылка что 2-я ну ладно

[Максим]

Андрей Рысь: вы даже не смотрели ссылку ? откройте ЕЁ : codepen.io/Geyan/pen/PWapmx

[Super Star]

. Shadow: её не было видно pixs.ru/showimage/44444png_5901413_25043318.png

Answer 2

[Алексей Скляров]

Потому что для блоков вы используете не float:left; , а display:inline-block; который сам по себе добавляет отступ в 1-2 пкс, поэтому в вашем случае не лишние 4 пкс остаются, а 4 пкс как раз не хватает.

Comments

[Super Star]

Да там больше =) я решил это с помощью flex-box