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

Question

在无缝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;
  }
}

然而，这个技巧并不适用于苏西；我怎么能在苏西身上获得同样的布局技巧呢？

梅斯特

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的最好部分，因为您可以将它们应用于任何属性，并控制其他所有内容。