好了——我读了John Albin Wilkins http://palantir.net/blog/responsive-design-s-dirty-little-secret——现在我明白了"隔离"模式的动机(以及它是如何实现的)。
然后我读了Sam最初对隔离模式的反驳,尽管他更新了他的帖子说他正在接受这个想法(或者至少他理解这个想法的动机)- http://snugug.com/musings/on-responsive-designs-dirty-little-secret
如果我正确理解了这一切,奇点提供了Zen网格的一个增强,就是它允许你混合输出样式(例如,你可以使用@import layout mixin在布局的中间切换到浮动输出)。
然而,在孤立模式下-我仍然不清楚你如何"清除一行"-正如John Albin Wilkins在他的帖子中提到的…
虽然使用此技能的浮动物品不能再看到彼此的右边缘,但他们仍然可以在清除时看到自己的下边缘。这意味着你可以通过简单地清除之前的网格项来开始一个新的网格项行,这个新行的位置将位于之前所有内容的下方。
假设我有一个部分,里面有6篇文章,我想让所有的文章占据该部分两列网格中的一列。
grid-span(1,1)
grid-span(1,2)
/* next row */
grid-span(1,1)
grid-span(1,2)
/* next row */
grid-span(1,1)
grid-span(1,2)
也许我有点痴迷于行清除,尽管我承认这在float输出中"自然"发生,并且Sam在他的帖子中锁定了它,并且没有帖子描述确切的"如何"在不使用clearfix容器的情况下在隔离模式下清除行,我的好奇心被激起了。
要清除一行,请在该行的第一项上使用clear: both
。
请注意,Singularity isolation span mixin应用clear: right
,因此您必须在span mixin之后应用clear: both
:
.foo
+grid-span(1, 1)
.bar
+grid-span(1, 2)
.baz
+grid-span(1, 1)
clear: both
.quux
+grid-span(1, 2)
有关清除的更多背景信息,请阅读此回答:使用Singularity进行布局