我正在尝试使用gallery mixin for SUSY在响应式网格上获得相等的高度列。为此,我设置容器“display:table”和列“display:table-cell”。如果我不使用mixin,这对我有用,但是一打开mixin就会失败。如果我以像素为单位设置高度,mixin可以工作,但如果我使用100%设置高度则不行;
我正在使用:
无论是否有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%;
}
答案 0 :(得分:1)
图库mixin使用浮点数和边距来定位元素,这不适用于表格显示。第一个是有效的,因为表格样式被忽略,并且项目以设定的高度浮动。如果你想使用表格样式来获得相等的高度,你应该忽略画廊mixin,并使用单独的mixins /函数来设置宽度/装订线(我认为只有inside
和inside-static
排水沟将使用表格显示)。
.ttd {
@include gutters;
display: table-cell;
background-color: #eee;
width: span(3 of 12);
}