1

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

しかし、two.columnsパーセンテージに問題があります。他のすべての列幅は正常に機能します。まず、何が起こっているのか：

ここに画像の説明を入力してください

2行目には明らかに何か問題があり、それが何であるかを本当に理解することはできません。

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

   $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をpastebinに置きます：http：//pastebin.com/bxq1a5Ge

前もって感謝します。

4

2 に答える 2

2

マージンもパーセンテージに変換する必要があると思います。div が複数の列にまたがるたびに、20px のガター幅がブロック幅の一部としてパーセンテージに変換されます。これはある時点でうまくいかなくなるでしょう。

もう 1 つのオプションは、ブラウザがパーセンテージ値をピクセル値にうまく変換できないため、丸めの問題であるということです。

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

于 2012-03-04T23:52:24.517 に答える
0

どうやら

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

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

于 2012-03-05T01:18:59.073 に答える