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

【问题标题】：Using Susy, how can I make a div expand to height of tallest sibling?使用 Susy，如何使 div 扩展到最高兄弟的高度？
【发布时间】：2017-03-14 05:20:18
【问题描述】：

在 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

【问题讨论】：

标签： css sass susy

【解决方案1】：

您可能正在使用基于display: float 的span() mixin。相反，请尝试使用您常用的技术，并且仅应用 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 最好的部分，因为您可以将它们应用于任何属性，并保持对其他所有内容的控制。

【讨论】：

嘿，效果很好。感谢您的支持！