2

我第一次尝试奇点，我正在尝试重新创建我拥有的网格。简单的一个。

这是一个简单的结构，用于测试：

<header>
    header
</header>

<main>
    main content
</main>

<aside>
    aside
</aside>

<footer>footer, nav, social icons etc</footer>

所以在一个 12 列的网格中，页眉是全宽的，主要是 9 列宽，旁边是 3 列宽，页脚是满 12 列。

不管怎样，不一致的地方是：header、aside、footer都有float:right，但main是float:left，所以它脱离了文档的流程。

这是网格：

/* grid */
$grids: 3;
$grids: add-grid(5 at 500px);
$grids: add-grid(7 at 768px);
$grids: add-grid(12 at 1024px);
$gutters: 1/3;

这是其余的：

html, body {
margin: 0;
padding: 0;
height: 100%;
background: #e1e1e1;
color: #333;
}
.container {
min-height: 100%;
margin: 0 auto;
@include background-grid;   
}
/* main layout */
header {
@include grid-span(3, 1);
background: red;
@include breakpoint(1024px) {
    @include grid-span(12, 1);  
}
}
main {
@include grid-span(3, 1);
background: green;
@include breakpoint(1024px) {
    @include grid-span(7, 2);   
}
}

所以问题是，它不尊重流程并且与标题重叠，就像这样http://imageupload.maxmendez.net/images/incon.png。绿色的主要，应该在标题下方。

为了解决这个问题，我必须这样做：

main {
@include grid-span(3, 1);
background: green;
@include breakpoint(1024px) {
    @include grid-span(7, 2, $options: 'right');    
}
}

正确添加选项，似乎很清楚并解决了我的问题。我是否有理由忽略为什么 mai 向左浮动？

仍然没有在 IE 中测试，但我担心兼容性。

4

1 回答 1

3

似乎您不熟悉该clear物业的用途或运作方式。使用 Isolation 输出方法时，您需要清除自己的浮点数，这是使用更传统的基于浮点输出方法的网格系统/框架可能没有接触到的。阅读它们的好地方是MDN 的 Clear section。

在您提供的示例中，标题跨越整个网格宽度。因为网格中的最后一项是向右浮动的，所以标题也是向右浮动的。这是为了隐藏行中最后一项的任何百分比舍入问题，并将它们全部对齐到右边缘。否则，所有网格项都向左浮动。因为这个项目是向右浮动的，为了清除它的边界边缘（不让它重叠），我们需要告诉 DOM 中的下一个项目（你的main元素）清除向右浮动的项目。这会将其推到下方header，创建一个新行。因为footer是全宽，因此是向右浮动的，并且您aside的也是向右浮动的，因此main/aside行上只有足够的空间容纳宽度的项目100%-width(aside)。因为footer对于剩余的区域来说太宽了，它会下降到下一行而不需要清除它的浮动。话虽这么说，这不会重叠，main因为main和aside是相同的高度；如果main变得高于aside，footer将重叠它。为了防止这种情况，你应该告诉footer清除漂浮在左边的东西，也main就是。

虽然这一切听起来相当复杂，但不要担心跨浏览器的兼容性。我们已经在包括 IE 在内的所有浏览器上广泛测试了 Singularity，它运行良好。

如果在所有这些之后您仍然对 Isolation 输出方法感到不舒服，您可以切换到 Float 输出方法。两者的心智模式截然不同。隔离是关于离散地定位元素之间的关系，而 Float 更类似于在网格上穿过一行。请记住，如果您切换到 Float，您将需要使用push和pull mixin 来微调网格周围的东西。

希望这可以帮助！

于 2013-08-18T03:58:02.903 回答