Question

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

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

<header>
    header
</header>

<main>
    main content
</main>

<aside>
    aside
</aside>

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

所以在12 col网格中，标题是全宽，主要是9个cols宽度，旁边是3个cols宽度，页脚是12个cols。

无论如何，不一致是这样的：标题，旁边和页脚有浮动：右边，但主要是浮动：左边，所以它离开了文档的流程。

这是网格：

/* 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中测试，但我担心兼容性。

Answer 1

好像你不熟悉clear属性的作用或它是如何工作的。使用隔离输出方法时，您需要清除自己的浮动，这是您可能没有使用更传统的基于浮点输出方法的网格系统/框架所暴露的内容。阅读它们的好地方是MDN's Clear section。

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

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

如果在完成所有这些后仍然对隔离输出方法感到不舒服，您可以switch to the Float output method。两者的心智模式截然不同;隔离是指离散地相对于彼此定位元素，而Float更类似于跨越网格上的行。请记住，如果您切换到Float，则需要使用push和pull mixins轻推网格周围的事物。

希望这有帮助！

使用奇点，我发现浮动容器与宽容器有一些不一致

1 个答案: