SUSY 布局的动态高度行

Question

我们如何让 SUSY 中的列以流畅的方式等于行高？

在这种情况下，行高由高度最高的内容决定。

无法在任何地方找到答案，这对大多数 SUSY 用户来说肯定会有所帮助。所以感谢您的任何贡献！

可疑设置：

@import "susy";

$susy: (
    columns: 12,
    gutters: 1/6,
    math: fluid,
    output: float,
);

CSS：

main-container { 
    @include container (80%);
} 

.block {
    background: #e1e1e1;
}

.row {
    display: inline-block;
}

.photo {
    height:100%;
}

#block1-1 {
    @include span(4);
}

#block1-2 {
    display: table;
    @include span(8 at 5);
}

#block2-1 {
    @include span(4);
}

#block2-2 {
    @include span(4 at 5);
}

#bloc2-3 {
    @include span(4 at 9);
}

HTML：

<div class="main-container">   

    <div class="row">
         <div id="block1-1" class="block">content</div>
         <div id="block1-2" class="photo">content</div>
    </div>

    <div class="row">
         <div id="block2-1" class="photo">content</div>
         <div id="block2-2" class="block">content</div>
         <div id="block2-3" class="block">content</div>
    </div>
</div>

Answer 1

CSS 没有任何跨浏览器的方式来处理等高的列 - 除了 CSS 之外，Susy 不能做任何事情。有any number of work-arounds，但最好的是flexbox（如果浏览器支持对您的站点来说足够好的话）。要将 Susy 与 flexbox 一起使用，请执行以下操作：

.row {
  align-items: stretch;
  display: flex;
}

#block1-1 {
  width: span(4);
}

您也许可以使用display: table; 和display: table-cell 来做类似的事情。在任何一种情况下，您都希望删除 Susy span mixin，并改用 span 函数。它使用相同的语法。