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

Question

我将http://semantic.gs与 LESS.js 一起使用。我很难理解这些概念，并且文档对我来说并不完全清楚。我承认我没有阅读太多关于 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);
}