css - SUSY 如何保持行分开

Question

如果我想要一个 SUSY 网格

[column1 of copy] [column2 of copy]
[column3 of copy now on a new row] [column4 of copy]

...也就是说，无论列有多高，我都想为我的 column3 和 column4 文本创建一个新行，是否有一种纯粹的 SUSY 方法来实现这一点？

我发现如果 column2 的内容很高(很多文本)，那么 column3 会“弹出”并直接位于 column1 下方，所以我假设没有应用 clear——我正在使用 omega 每行最后一项的指令，并天真​​地假设这是一个能确保行清除的 Elixir 。

我现在正在解决这个问题

<div class="clearfix"></div>

在每一行之间，但我想知道我是否不理解 SUSY 的一部分，也许我可以用纯 SUSY 语句来实现？

Answer 1

您不需要任何额外的标记，也不需要 Susy 的帮助，有一种 super 简单的 css 方法可以处理这个问题。这正是 clear 属性的用途。您只需要:

.column-three { clear: both; }

您可以清除 left、right 或 both 以将元素放在 float 下方的任一侧或两侧。 Susy 没有任何功能，因为我找不到任何方法使它比现在更简单或更有意义。