我正在尝试使用 SUSY(用于 SUSY) 的库混合在我的响应式网格上获取等高列。为此,我设置了容器"显示:表"和列"显示:表单元格"。如果我不使用混音,这对我有用,但一旦我打开混音就会失败。如果我以像素为单位设置了高度,则 mixin 有效,但如果我使用 100% 设置高度,则不行;
我正在使用:
- 苏西 (2.1.3) 和
- 萨斯 (~> 3.3)
这适用于或不带 SUSY:
.ttable {
@include container;
padding: gutter();
@include clearfix;
.ttd {
@include gallery(3 of 12);
}
}
.ttable {
display: table;
height: 500px;
border: 1px solid #BF0D3E;;
}
.ttd {
display: table-cell;
background-color: #eee;
height: 500px;
}
这不适用于 SUSY,但在关闭 mixin 的情况下有效:
.ttable {
display: table;
height: 100%;
border: 1px solid $fuschia;
}
.ttd {
display: table-cell;
background-color: #eee;
height: 100%;
}
库 mixin 使用浮点数和边距来定位元素,这不适用于表格显示。第一个有效是因为忽略了表格样式,并且项目以设定的高度浮动。如果你想使用表格样式来获得相等的高度,你应该省略画廊 mixin,而是使用单独的 mixin/函数来设置宽度/装订线(我认为只有inside
和inside-static
装订线才能与表格显示一起使用)。
.ttd {
@include gutters;
display: table-cell;
background-color: #eee;
width: span(3 of 12);
}