使用 Susy，如何使 div 扩展到最高兄弟的高度？

Question

在 susyless CSS 中，我可以使用 display: table 和 display: table-cell 使具有各种内容长度的容器增长到它们最高兄弟姐妹的高度。

.not-susy {
  .short {
    width: calc(100%/12 * 8);
  }
  .wrap{
    display: table;
    border-spacing: 20px;
  }
  .item {
    margin: 5px;
    display: table-cell;
  }
}

但是这个技巧不适用于 Susy；如何使用 Susy 实现相同的布局技巧？

Meister

Answer 1

您可能正在使用 span() mixin，它基于 display: float。相反，请尝试使用您常用的技术，并且仅应用 span() 函数来设置您的宽度：

.susy {
  .short {
    width: span(8 of 12);
  }
  .wrap{
    display: table;
    border-spacing: gutter();
  }
  .item {
    margin: 5px;
    display: table-cell;
  }
}

我还使用了 Susy 的 gutter() 函数来设置边框间距。 span() 和 gutter() 函数是 Susy 最好的部分，因为您可以将它们应用于任何属性，并控制其他一切。

使用 Susy，如何使 div 扩展到最高兄弟的高度？

Using Susy, how can I make a div expand to height of tallest sibling?

css

sass

susy