我在将 zen-grids 集成到 drupal 时遇到问题。我已经安装了 sass 和 compass 并使用它们。然后我创建了一个包含 3 个字段的内容类型。这给了我这样的html结构：
<article class="node-1 node node-layout1 node-promoted view-mode-full clearfix" typeof="sioc:Item foaf:Document" about="/node/1">
<div class="field field-name-field-topleft field-type-text-long field-label-above">
<div class="field field-name-field-topmid field-type-text-long field-label-above">
<div class="field field-name-field-topright field-type-text-long field-label-above">
</article>
然后我尝试使用 zen 网格来创建这样的布局：
topleft___________topmid_______________topright
所以我使用了该代码：
$zen-column-count: 5; // Set the total number of columns in the grid.
.node-layout1{
max-width:1200px;
@include zen-grid-container; // Apply this mixin to the container.
}
.field-name-field-topleft {
@include zen-grid-item(2, 1);
}
.field-name-field-topmid {
@include zen-grid-item(1, 2);
}
.field-name-field-topright {
@include zen-grid-item(2, 3);
}
所有工作都还不错，我将所有 3 个元素排成一行，但它们的宽度和偏移量太大了，topmid 从 topright 应该完成的地方开始，所以在那之后我的页面太大了。
这是我从 compass 为所有 3 个元素生成的 css：
.field-name-field-topleft {
float: left;
margin-left: 0;
margin-right: -200%;
width: 200%;
}
.field-name-field-topmid {
float: left;
margin-left: 100%;
margin-right: -200%;
width: 100%;
}
.field-name-field-topright {
float: left;
margin-left: 200%;
margin-right: -400%;
width: 200%;
}
我发现问题出在
$zen-column-count: 5;
没有被应用，它在开始时设置为 1，似乎我无法更改它。