丸め誤差がなく、複数の列幅を持たない流体グリッド

Question

私はすべてのヒップ、流体グリッドフレームワークを見てきました。そして、列幅に対してパーセンテージを使用する流体グリッドを持つことは不可能です。ガター幅）、すなわちは3で割り切れます。、そして恐ろしい丸め誤差はありません。見てみましょう：

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

は、ブラウザウィンドウのサイズを変更してみて、物事が周りにバウンスに注意してください。ほとんどの溝は行ごとに一列に並んでいません。これは、整然としたサブピクセル処理の欠如のためである。もちろん、丸めはブラウザによって異なります。

私が示した例は、12列のグリッドに基づいています.12列のグリッドでは、ページの幅の1/4と1/3の要素が使用できるため、理想的です。それは以下の全幅「メイン」の領域、および3「バケット」でホームページを持っているためにかなり標準的です3.

で割り切れない：The Golden Gridのようなものは動作しません理由です

。標準レイアウト。

しかし、 "応答性の高いサイト"を構築しようとすると、いくつかの@mediaクエリを持つ固定レイアウトのように見えますが、要素をピクセル完全に揃えたい場合は唯一の選択肢かもしれません。

編集：Webkitではずっと悪くなりますが、Firefoxでさえ完璧な結果は得られません。

Answer 1

CSS3 FlexBoxを試しましたか？これは、Firefoxで動作しますが、残念ながらまだ少しビクビクです&は

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

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