让我的脚接触 Susy/sass/haml 等(使用调整后的中间人 - 来自主分支的最新 susy)
在 grid.css.scss 中有这个
@import 'susy';
$total-columns : 8;
$column-width : 4em;
$gutter-width : 0em;
$grid-padding : $gutter-width;
$break-max : 12;
$container-style: magic;
// Container
.page {
@include container($total-columns, $break-max);
}
// Layout
.header {
@include at-breakpoint($break-max) {
@include pad(1,1);
}
}
.pagenav {
clear: both;
@include at-breakpoint($break-max) {
@include pad(1,1);
}
}
.main {
clear: both;
.main-left {
@include span-columns($total-columns omega);
@include at-breakpoint(10) {
@include span-columns(7);
}
}
.main-right {
@include span-columns($total-columns omega);
@include at-breakpoint(10) {
@include span-columns(3 omega);
}
}
@include at-breakpoint($break-max) {
@include pad(1,1);
}
}
.footer {
clear: both;
@include at-breakpoint($break-max) {
@include pad(1,1);
}
}
该片段来自 site.css.scss
.main {
background-color: #eee;
}
.main-left {
background-color: #fff;
}
.main-right {
background-color: #eee;
}
.body背景是黑色的...
现在,当左主内容大于右主内容时,我会在右下角看到一个黑色方块......
无论如何我都能让右下角#eee i.o.w。 main-right 与 main-left 具有相同的高度(动态) - 或者具有要应用的 .main 背景...???
Thanks
Peter
PS 拥有更多学分的人应该在 stackoverflow 中创建一个 Susy 标签......
#main {
display: table;
background-color: #eee;
}
.main-left,
.main-right{
display: table-cell;
vertical-align: top;
}
.main-left {
background-color: #fff;
}
.main-right {
background-color: #eee;
}
这将使两个 div 相互匹配,就好像它们是相邻的表格单元格一样。
别担心,这不符合使用表格进行布局的资格,它对于列来说很酷,而且它不会给我带来任何问题。
当然,糟糕的旧浏览器不支持它,但是您可以使用 .js 脚本,例如ie9.js在必要的地方修补它。
本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系:hwhale#tublm.com(使用前将#替换为@)