为什么Singularity GS无法正确显示以下标记？

<div class="grid"> 
    <header>header</header> 
    <div>main</div> 
    <footer>footer</footer> 
</div>

我为三个屏幕尺寸定义了三个网格。标记包含三个元素，它们显示在每个屏幕大小的不同列中。为什么Singularity GS无法正确显示以下标记？

移动布局，主要DIV停留在第一栏，页眉和页脚显示获得第2列

平板电脑布局，所有这三个要素得到重叠的第2列（因为利润率右：-100 ％;），似乎是一个错误。

桌面布局，它的工作原理，页眉/页脚/主得到显示在第五列的唯一布局

网格的定义：

// grid columns 
$grids  : 2; 
$grids  : add-grid(6 at 40em); 
$grids  : add-grid(12 at 50em); 

// grid gutters 
$gutters : .2;

的风格：

html, body { 
    margin: 0; 
    padding: 0; 
    height: 100%; 
} 

.grid { 
    @include background-grid; 
    margin: 0 auto; 
    max-width: 1080px; 
    min-height: 100%; 
} 

.layout { 
    // mobile layout 
    @include grid-span(1,2); 
    // tablet layout 
    @include breakpoint(40em){ 
    @include grid-span(4,2); 
    } 
    // desktop layout 
    @include breakpoint(50em){ 
    @include grid-span(8,5); 
    } 
} 

header, 
.grid div, 
footer { 
    @extend .layout; 
}

有人知道为什么会发生这种情况吗？

来源

2013-04-10 Michael Zumstein

奇点需要知道每列的位置。 grid-span中的第二个值是您设置为2和5的位置，强制列在这些位置开始。如果您希望将内容放入第一列，您可以将该值更改为1。

这听起来好像你习惯于在页面中浮动列，所以在它之前的那个列会影响下一列的放置位置。默认情况下，Singularity使用一种称为isolation的技术。您可以通过编写$output: float来切换到更传统的浮动方法。这些输出样式的文档可以在这里找到：https://github.com/Team-Sass/Singularity/wiki/Output-Styles#float

来源

2013-04-10 23:25:18 scottkellum

感谢您的反馈斯科特。我知道或认为我知道/知道网格跨度是如何工作的，但我并不了解奇异性的默认输出风格。仍然没有真正明白为什么它不适合我的设置，但我会让人们知道什么时候解决。只需阅读由snugug/john albins发布的文章http://snugug.com/musings/on-responsive-designs-dirty-little-secret并了解隔离/浮点输出样式的全部内容。 thx反正到目前为止！ – 2013-04-11 15:13:41

为什么Singularity GS无法正确显示以下标记？

回答

相关问题