Жидкостная сетка без ошибок округления и ширины столбцов

Question

Я рассмотрел все бедра, флюидные сетки, и кажется, что невозможно создать сетку для жидкости, которая использует проценты для ширины столбцов (и ems для ширина желоба), то есть делится на 3 и не страдает от ужасных ошибок округления. Посмотрите:

http://roestudios.com/code/12-columns.html

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

Пример, который я показал, основан на сетке из 12 столбцов, что идеально, поскольку сетка из 12 столбцов позволяет элементам, которые составляют 1/4 и 1/3 ширину страницы.

Вот почему что-то вроде The Golden Grid не будет работать: он не делится на 3.

Это довольно стандартный, чтобы иметь домашнюю страницу с полной шириной «основной» области, и три «ведра» ниже. Стандартная компоновка.

Но, пытаясь создать «отзывчивые сайты», кажется, что фиксированные макеты с несколькими запросами @media могут быть единственным реальным выбором, если я хочу, чтобы элементы были идеально выровнены по пикселям.

Редактировать: В Webkit многое гораздо хуже, но даже Firefox не дает идеальных результатов.

Answer 1

Вы пробовали CSS3 FlexBox? Он работает в Firefox, но, к сожалению, все еще немного нервничаю & не попиксельно совершенный в Chrome ..

http://jsfiddle.net/lukem/gqsCV/3/

http://www.html5rocks.com/en/tutorials/flexbox/quick/