Question

我正在用奇点网格系统做我的第一个项目，到目前为止我很喜欢它。但是，我在一个<h2>和<h3>元素重叠的部分遇到了一个奇怪的问题......真的很难弄清问题是什么。

我的开发项目位于： http://senseslabv3.brunomonteiro.mixture.io/

首先<section> class=intro。

有没有人知道它是怎么回事？谢谢你的时间。

Answer 1

正如其他人所说，你需要清除你的花车。默认情况下，Singularity的输出风格是＆＃34; Isolation＆＃34;这需要了解如何清除浮点数（clear: left，clear: right，clear: both，clear: none）。奇点假设没有明确的（clear: none），这意味着如果没有正确清除网格项可能会重叠。这样做是为了遵循隔离输出方法最常用的心理模型，特别是将块放置在网格上的离散点上。清除浮动将清除它们到项目的边缘边缘，最明显的是通过创建新行。请参阅Mozilla Developer Network article on Clear。

注意，按照lolmaus的建议清除你的花车和clearfixing实际上做了不同的事情。清除浮动将清除项目到边缘边缘，而清除项目将确保所有浮动的子项都被正确包含。</ p>

Float输出遵循不同的心理模型，一种遍历网格行，因此会自动为您清除浮动。如果您更喜欢使用Float输出样式作为默认值，只需在调用网格之前将$output: 'float'添加到Sass文件中。这将改变您的全局输出样式上下文。或者，您可以使用float-span来使用Float输出样式心理模型并按需输出而不是grid-span，或者将$output-style: 'float'作为选项传递给grid-span。

请查看Output Styles，Output Span，Float Span和Context Overrides in grid-span的文档，以深入了解Singularity中提供的不同输出样式和选项。< / p>

Answer 2

清除两个需要在网格范围mixin .tag h3 {clear: both;}

下面的某个地方声明

Answer 3

而不是丑陋的<div style="clear: both;"></div>考虑这个：

.intro h2 {
  @include pie-clearfix; }

或者，如果您使用toolkit：

.intro h2 {
  @extend %clearfix-micro; }

如果您共享SASS代码，我们可能会更好地解决您的问题。

Answer 4

这是一个老问题，但我遇到了问题。 Snugug的答案很完美，但我想展示对我有用的代码。（无法将代码放入评论中）

//主要内容容器

.l-main {  
  @include breakpoint(80em) {
    @include grid-span(16, 3, 20);  
  }  
}

//内容容器中的全宽横幅。我需要清除它，因为横幅上方和下方还有其他几个较小的列/网格。

.b-banner {
  @include breakpoint(80em) {
    @include float-span(16, 1, last);
  }  
}

块元素与singularitygs重叠

4 个答案: