1

好的 - 我已经阅读了 John Albin Wilkins http://palantir.net/blog/responsive-design-s-dirty-little-secret - 我现在了解了“隔离”模式的动机（以及它是如何实现的）。

然后我阅读了 Sam 最初对隔离模式的反驳，尽管他更新了他的帖子说他正在接受这个想法（或者至少他理解这样做的动机） - http://snugug.com/musings/on-响应式设计-肮脏的小秘密

如果我正确理解了这一切，Singularity 对 Zen 网格提供的一项增强功能是，它允许您混合输出样式（例如，您可以使用 @import 布局混合在布局中间切换到浮动输出） .

然而，在隔离模式下——我仍然不清楚你如何“清除一行”——正如约翰·阿尔宾·威尔金斯在他的帖子中提到的那样......

虽然使用这种技术的浮动物品不再能看到彼此的右边缘，但在清除时它们仍然可以看到它们的底部边缘。这意味着您可以通过简单地清除先前的网格项来启动新的网格项行，并且此新行将位于所有先前内容的下方。

假设我有一个部分，里面有 6 篇文章 - 我希望所有文章都占据该部分中两列网格的 1 列。

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)

也许我对行清除有点着迷，尽管我承认这在浮点输出中“自然”发生，并且 Sam 在他的帖子中抓住了它，并且没有任何帖子准确描述“如何”清除行在不使用 clearfix 容器的隔离模式下，我的好奇心被激起了。

4

1 回答 1

2

要清除一行，clear: both请在该行的第一项上使用。

请注意 Singularity 隔离 span mixin 应用clear: right，因此您必须clear: both在 span mixin 之后应用您的：

.foo
  +grid-span(1, 1)

.bar
  +grid-span(1, 2)

.baz
  +grid-span(1, 1)
  clear: both

.quux
  +grid-span(1, 2)

有关清除的更多背景信息，请阅读此答案：Layout using Singularity

于 2014-06-17T07:29:56.630 回答