Три блока в ряд и появляющийся пиксель справа — как победить?

Question

[weranda]

Приветствую

Встречайте наглядный пример.
Суть: три блока в одном блоке (ширина: 33%, 34%, 33%). При изменении ширины окна браузера справа появляется незаполненное пространство.
Вопрос: как исправить в текущей верстке, не прибегая к флексам?
В FireFox все нормально, а в Chrome — ненормально, хотя, может быть, это и нормальное поведение браузера, но хотелось бы исправить.

P.S.
Попробовал на флексах, то же самое.

Answer 1

[Ксения]

Блоки инлайновые? если да, то это может быть символ переноса или пробела. Тут варианты борьбы с этим.

Comments

[weranda]

Везде установлен display: block;

Answer 2

[Ankhena]

Еще бы у вас пример кода соответствовал вопросу, было бы круто.
Зачем вы используете order я не знаю, если перестать его использовать, то код можно оптимизировать.
https://codepen.io/anon/pen/ZrxBgZ?editors=1100

Comments

[weranda]

Ankhena Что конкретно не соответствует в коде вопросу? Значение ширины в 33.3333% решает поставленную задачу?

[Ankhena]

weranda, нет, не только, откройте код и посмотрите

[weranda]

Ankhena, Я понял про какой order вы пишите. Тестил потом флекс и как-то автоматом все сохранилось, исправил. Ваш пример не решает задачу — все тот же пиксель справа появляется.

[Ankhena]

weranda, вот прямо мой, 33.333333, space-between и убранными границами и clearfix - решает.

[weranda]

Ankhena, Что серьезно? В каком месте он решает?

[Ankhena]

weranda, видео или скрин всего экрана без масштабирования, где это не так

[weranda]

Ankhena, В вопросе есть GIF, на нем все показано!

[Ankhena]

weranda, а лучше не так

Это в любом случае сложности хрома, а не верстки. Поэтому плясать нужно не отсюда, а от макета. Если надо, чтобы был один красный блок, это один расклад, если не надо, то другой.

Зазор может возникнуть исключительно при ресайзе браузера (т.е. при перерасчете размеров), которым никто кроме разработчиков не страдает, так что можете использовать свой старый код, если не стыдно за флоаты.

[weranda]

Ankhena,

Если надо, чтобы был один красный блок, это один расклад, если не надо, то другой

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

можете использовать свой старый код, если не стыдно за флоаты.

Ну, спасибо за разрешение;) Я считаю, что нет ничего зазорного в верстке на div'ах, в том числе и в таблицах, если оно требуется.

Поэтому плясать нужно не отсюда, а от макета.

Плясать — это как? Что вы под этим понимаете?

[Ankhena]

weranda,

Плясать — это как? Что вы под этим понимаете?

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

Я считаю, что нет ничего зазорного

Это ваше право, а также показатель квалификации, больше ничего. Клиентов устраивает и славно, делайте как хотите. Благо клиентов разного уровня полно.

если оно требуется

Есть спецификация и предназначение того или иного инструмента или свойства. Если решение правильными способами отсутствует, тогда можно использовать костылики. В вашем случае есть решение с помощью флексов или инлайн-блоков. Флоаты же предназначаются не для этого.

[weranda]

Ankhena,

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

Достаточное, незаметное, но внимательный глаз заметит...

[Ankhena]

weranda, остается одно: пишите гуглу, пусть решают

Answer 3

[slava_flash]

как писали ранее, поставь 33.333333% (6 цифр после запятой) ширину блока
https://codepen.io/anon/pen/RQMVGW?editors=1100

Comments

[Ankhena]

Просто изменение значения процентов не решает задачу.

[weranda]

slava_flash Не помогает, есть еще предложения?

[slava_flash]

weranda, хз, по крайней мере у меня пропадает вышеописанная проблема

[weranda]

slava_flash, она (проблема из вашего примера) пропадает только если блок ".wrapper" меньше или равен 760px. Если же увеличить окно более чем на 760px, к примеру, до 900, то в вашем же примере это проявляется.
Смотрите GIF: