css - SUSY 如何保持行分开

标签 css sass susy-compass

如果我想要一个 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 语句来实现?

最佳答案

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

.column-three { clear: both; }

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

关于css - SUSY 如何保持行分开,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/15974822/

相关文章:

angular - 根据变量 Angular 6 Typescript 选择不同的 SCSS 文件

jquery - 在构建移动优先布局时,可以使用 jquery 重新排列 HTML 的视觉源顺序吗?

Highcharts - 隐藏图表无法正确调整大小

css - Susy "static"容器样式

css - 这两个 css 选择器是否相同?

html - Safari 浏览器中的内联 block 故障

html - 如何使背景图像适合所有屏幕尺寸?

html - Input 元素的占位符是否可以有多个文本样式?

html - 错误错误 : ExpressionChangedAfterItHasBeenCheckedError in Angular 5

javascript - 如何使用 JQuery 或 Javascript 使用动态路径从 JSON 对象中删除