2

Проблема заключается в непонятных размерах большого блока. Хотя, по подсчетам, он должен быть ровно в два раза больше, и, следовательно, под ним должно поместиться еще 2 маленьких блока.

Как его можно поставить в то же место? Флексами не разобрался, занимает целый ряд. При ресайзе окна он должен выталкивать левые блоки. http://new.navcav.com/

2
  • По поводу "под ним должно поместиться". Высота должна быть не 420px, а 416px, т.к. отступы у вас - по 8px. 7 окт 2016 в 18:03
  • @ВиталийЕмельянцев это мне пришлось уже к этому прибегнуть, должно быть ровно 420 и 10px, но когда их ставишь - блок визуально становится больше, не знаете в чем причина? Весь день уже не могу придти к ответу
    – Atomrr
    7 окт 2016 в 18:06

1 ответ 1

4

Сетка в вашем примере рушится из-за display: inline-block; у слайдов.

Дело в том, что строчно-блочные (inline-block) элементы, при расположении их в ряд - пытаются вести себя как строчные (inline) - выстраиваться в соответствии с интерлиньяжем (line-height), размерами шрифта (font-size). И также, что важно в вашем случае - между ними может присутствовать небольшой зазор, равный ширине пробела при установленном размере шрифта. Он то и рушит сетку - зазоры между тайлами оказываются больше, чем вы задаете с помощью margin.

Проблему решает установка display: block; и float: left; для этих блоков:

.tile {
    max-width: 300px;
    max-height: 200px;
    position: relative;
    display: block;
    margin: 10px;
    float: left;
}

margin можно вернуть к значению 10px, и для мелких, и для большого тайла. Сетка не поедет.

введите сюда описание изображения

4
  • Спасибо вам большое! То, что нужно. Когда ставит float: left, забыл, что изначально пытался выравнять inline-block'ами. Еще раз благодарю вас
    – Atomrr
    7 окт 2016 в 18:25
  • ну как бы обычно при использовании инлайн блоков, сбрасывается размер шрифта у контейнера этих блоков в 0, а уже для самих блоков размер шрифта задается необходимый. Так избавляются от пробелов... Думаю Вам это известно.
    – pepel_xD
    7 окт 2016 в 19:14
  • @pepel_xD, да, техника известна. Она нестабильная (css-tricks.com/fighting-the-space-between-inline-block-elements/…) и приводит к излишнему разрастанию стилей для font-size. Поэтому не рекомендую ее использовать. 7 окт 2016 в 19:31
  • @ Виталий Емельянцев На мой взгляд не разрастание, более точный контроль над этим свойством. В большинстве случаев сбрасываю шрифт в 0 для всех тегов в таблице сбросов, далее для body назначаю размер по умолчанию в пикселях, а уже дальше по необходимости либо в em, либо в %... но это имхо... дело вкуса...
    – pepel_xD
    7 окт 2016 в 19:42

Ваш ответ

By clicking “Отправить ответ”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

Всё ещё ищете ответ? Посмотрите другие вопросы с метками или задайте свой вопрос.