1

我正在查看 Skeleton 框架 (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); }

这是我使用的 mixins/functions，不确定这是否重要：

@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 %>

我想如果百分比的计算有问题，所有行都会以一种或另一种方式搞砸。但是，这只是第二个..如果有人看到这里发生了什么，请赐教？

我将处理后的 CSS 放在 pastebin 上：http: //pastebin.com/bxq1a5Ge

提前致谢。

4

2 回答 2

2

我认为您还需要将利润率转换为百分比。每当一个 div 跨越超过 1 列时，20px 的装订线宽度就会转换为一个百分比，作为块宽度的一部分。这最终会在某个时候出错。

另一种选择是这是一个四舍五入的问题，因为浏览器无法将百分比值巧妙地转换为像素值。

由于 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 回答