我正在查看 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
提前致谢。