3

我想将 div 中的内容居中，同时允许 div 占据屏幕的整个宽度。我在标题中有一个重复 x 的背景图像，并且必须在将内容居中时拉伸屏幕的整个长度。我知道我可以在下面的示例中添加一个 div 作为容器，但这会在 html 中添加很多非语义标记。susy 容器包含已添加到我项目的包装器中。

<body>
  <div class="wrapper">
    <header>
      <div class="container">
         centered content goes here...
      </div>
    <header>
  </div>
<body>

有没有办法用 Susy 做到这一点，而不需要额外的内部容器 div。如果只是标题就好了，但我的标记在很多地方都需要这个。最后它看起来像任何 CSS 网格框架。

4

1 回答 1

2

你有几个可行的选择。真的，你可以在 CSS 中找到任何解决方案，你都可以使用 Susy 来帮助你。Susy 容器与自己编写 CSS 并没有什么特别之处。苏西只是为你做数学。

最健壮/最明显的方法确实需要 1 个包装器，但是您的<header>元素将很好地发挥该作用，并且除了容器和标头之外，您不需要额外的 div：

<header>
  <div class="container">
    content...
  </div>
</header>

我使用的另一种方法是使用生成的内容创建整页背景（仅使用标题）。这需要知道标题的高度：

header {
  @include container;
  &:before {
    content: "";
    position: absolute;
    top: 0;
    right: 0;
    left: 0;
    height: 6em; // the height of your header.
  }
}

或将 overflow-x 设置为隐藏在您的身体上：

body { overflow-x: hidden; }

header {
  @include container;
  position: relative;
  &:before {
    content: "";
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
  }
}

这可能还需要一些 z-index 调整才能正常工作。

如果您发现另一种您更喜欢的 css/html 方法（我很想看到一个），并且您不知道如何使其与 Susy 一起使用，我很乐意向您展示。

于 2013-02-06T04:03:57.023 回答