Css 如何在Singularity中为同一容器元素内的元素设置不同的宽度

我仍然对奇点应用中的几个方面感到困惑。例如，我想知道一件事。在下面的要点中，我设置了几个简单的元素。底部的蓝色是页脚，中间的黄色是内容，上部的三个细胞（红色、绿色的紫红色由网格跨度构建）构建页眉。这三个部分都由同一个容器构建

我想知道什么是最干净的方法，使标题比其他两个更宽

• 仅为包装标题元素定义一个宽度百分比
• 通过将布局mixin应用于header元素并设置一个全新的上下文

---

或者，如果三个容器都依赖于相同的容器设置和上下文，那么它们中的一个就不可能有不同的宽度？最好的问候Ralf

Singularity是容器不可知的，所以您可以按照自己喜欢的方式定位标题容器

有许多方法可以使其中一个容器变大，而这个问题与奇点无关

我最喜欢的方法是负边距。它不适用于您的样式，因为您在容器上设置了

margin:0 auto

。我建议您在

body

上使用

margin:0 auto

。这将需要一些重构

然而，与奇点相关的是在不同宽度的容器中保持一致网格的问题。你需要做一些数学运算，花一些时间摆弄价值观

以下是我成功实现的目标：

注意，我没有使用

布局

mixin，而是简单地重新定义

$grids

。不建议使用这种方法，但当存在多个不同的网格且其中没有一个可以称为主网格时，这种方法是可以接受的

---

PS注意，SassMesister在Sass3.3上，而Singularity和Breakpoint在Sass3.3上运行不正常。改用SassBin.com，它将停留在Sass 3.2上。

哇，不错！谢谢好吧，哈默和简单的沙斯让事情变得有点棘手，但我想我还是理解它。^^推荐的方法是通过布局mixin？与其重新分配$grids，不如建议使用布局mixin？但是，在您的例子中，扩展主容器类（带有负边距）并在主体中执行基本大小定义是推荐的方法？掌握语法后，Haml和Sass更容易阅读。如果要覆盖站点范围的网格，请使用

layout

mixin。如果每次使用的网格不同，请覆盖

$grids

。没有推荐的设置容器的方法。这是个人喜好和经验的问题。嗯，但还有两个问题。你的解决方案很好，但如果你考虑到我的初始示例的设置，我已经使用了背景色。一个用于包含页眉元素、主元素和包含页脚的包脚。页脚包装有一个背景色，页眉和主内容包装有另一个。在您的解决方案中，背景颜色无法填充整个背景宽度，或者如果您使用图像作为背景图案，则两者都无法填充。至少据我所知/另一个问题可能听起来有点愚蠢，但由于Singularity中没有显式的容器混合，所以对我来说仍然有点抽象，因为我猜“container”这个名称并不是强制要求Singularity知道容器是什么（我曾经用过Susys@include container；）。特别是在您的sassbin示例中，容器类除了clearfix之外没有任何重要的属性。嘿@rpk，这个讨论已经超出了StackOverflow格式的范围，该格式应该专门用于一个特定的问题。在闲逛时随时给我留言lolmaus@gmail.com或者Skype lolmaus_uu，我们将研究解决方案。