流体グリッドの作成 - パーセンテージが混乱しているようです

Question

私はスケルトンフレームワーク（getskeleton.com）を見ていましたが、流体グリッドシステムが必要でした。私はまた、これらのグリッドの内部の動作に興味があるので、私は自分のロールを決めることにしました。

しかし、私はtwo.columnsの割合で問題に遭遇しています。その他の列幅はすべて正常に動作します。まずの、ここで何が起こっているのかです：

あり二行目と間違って何かが明確だ、と私は本当にそれが何であるかを把握することはできません。次のように

このレイアウトのための私のコードは次のとおりです。ここで

$max-width: 600px; 

    .container { 
    @include container($max-width); 

    .column, .columns { 
     @include columns($max-width); 
    } 

    .one.column, .one.columns { width: perc(30px, $max-width); } 
    .two.columns    { width: perc(80px, $max-width); } 
    .three.columns    { width: perc(130px, $max-width); } 
    .four.columns    { width: perc(180px, $max-width); } 
    .five.columns    { width: perc(230px, $max-width); } 
    .six.columns    { width: perc(280px, $max-width); } 
    .seven.columns    { width: perc(330px, $max-width); } 
    .eight.columns    { width: perc(380px, $max-width); } 
    .nine.columns    { width: perc(430px, $max-width); } 
    .ten.columns    { width: perc(480px, $max-width); } 
    .eleven.columns   { width: perc(530px, $max-width); } 
    .twelve.columns   { width: perc(580px, $max-width); } 

は、私が使用したミックスイン/機能は、それが重要なのかどうかわからないです。

@function perc($width, $container-width) { 
    @return percentage($width/$container-width); 
} 

@mixin container($width) { 
    position: relative; 
    width: $width; 
    margin: 0 auto; 
    padding: 0; 
} 

@mixin columns($max-width) { 
    float: left; 
    display: inline; 
    margin: 0 10px; 
} 

コードHTMLファイルにされますただ：

割合の計算に何か問題があった場合、私は考え出し

<% 6.times do %> 
    <div class="two columns box"></div> 
<% end %> 

、すべての行が一方向または他の方法で混乱するでしょう。しかし、それはちょうど2番目のものです..もし誰かがここで何が起こっているのを見たら、私に教えてください？

私はペーストビン上で処理CSSを置く：事前にhttp://pastebin.com/bxq1a5Ge

感謝を。

Answer 1

どうやら

perc(80px, 600px)は13.333%を与えます。

width: 13.3333333%を使用すると問題が解決しました。

Answer 2

マージンをパーセンテージに変換する必要があると思います。 divが1列以上になるたびに、20ピクセルのガター幅がブロック幅の一部としてパーセンテージに変換されます。これはある時点で間違ってしまうことになります。

ブラウザがパーセント値をピクセル値にきちんと変換できないため、丸めの問題です。

jsfiddleはSCSSをサポートしているので、私は基本的にjsfiddle of the issueを設定しました。この例は、オプション2を良い候補として示していますが、すべての幅をパーセンテージに変更することをお勧めします。