作者热门文章
- objective-c - iOS 5 : Can you override UIAppearance customisations in specific classes?
- iphone - 如何将 CGFontRef 转换为 UIFont?
- ios - 以编程方式关闭标记的信息窗口 google maps iOS
- ios - Xcode 5 - 尝试验证存档时出现 "No application records were found"
我刚开始玩 Susy。我有一个 12 列网格,上面有网格填充。现在我希望我的页面标题跨越整个网格,包括网格填充。我现在正在做的是计算总宽度,然后在标题上设置负边距。这对我来说感觉很老套...有更简洁的方法吗?
$total-columns : 12;
$column-width : 3.5em;
$gutter-width : 1.25em;
$grid-padding : 2em;
$total-width: ( $total-columns * ($column-width + $gutter-width) ) + ( 2 * $grid-padding ) - $gutter-width;
header {
height: 150px;
width: $total-width;
margin-left: -$grid-padding;
}
最佳答案
您有两个不错的选择。一个是您所拥有的简化版本。由于 block 元素默认为 100% 宽度,因此您可以简单地消除宽度设置(以及所有复杂的数学运算)。
header {
height: 150px;
margin: 0 0 - $grid-padding;
}
您的另一个选择是在页面上使用多个容器。这需要更改标记,但有时它是一种效果很好的简化。如果将 header 移到当前容器之外,并将其声明为自己的容器,就可以解决问题。
(作为旁注:如果您确实需要全宽,您可以简单地使用 columns-width()
函数(用于内部宽度,没有填充)或 container- outer-width()
用于包括填充在内的全宽。)
更新:
我一直在使用这个 mixin,在我需要的任何地方应用出血:
@mixin bleed($padding: $grid-padding, $sides: left right) {
@if $sides == 'all' {
margin: - $padding;
padding: $padding;
} @else {
@each $side in $sides {
margin-#{$side}: - $padding;
padding-#{$side}: $padding;
}
}
}
一些例子:
#header { @include bleed; }
#nav { @include bleed($sides: left); }
#main { @include bleed($sides: right); }
#footer { @include bleed(space(3)); }
关于css - 苏西 : How to extend content box to cover grid-padding as well?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/11223927/
我是一名优秀的程序员,十分优秀!