更好地理解CSS网格列 - 使用浮点数的列

Question

我使用的是带有LESS.js的http://semantic.gs。我很难理解这些概念，文档对我来说并不完全清楚。我承认我没有在LESS.js上阅读过多的内容，但我已阅读了Semantic Grid System网站上的文档。

我的理解是只有大量的列和每个编号的列由less.js处理（？）。

// This LESS rule... 
article { 
    .column(9); 
} 

// Is compiled to... 
article { 
    display: inline; 
    float: left; 
    width: 700px; 
    margin: 0 10px; 
} 

这将大致相同，除了列将在不同的位置？

我如何找到我将用于页脚的列？我不确定是否应该使用正常的CSS来制作页脚。

干杯。

Answer 1

很可能有一个已经创建的LESS Mixin来定义列。可能看起来像这样。

.column(@span: 1) { 
     float:left; 
     width: 8.33333% * @span; 
} 

@span是每个部分要跨越的网格列的数量。所以说这是一个12列的网格，那么你可能会希望页脚跨越网格的整个宽度：

footer { 
     .column(12); 
}