Question

我希望将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网格框架。

Answer 1

您有几个选项可行。真的，你可以在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一起工作，我很乐意向你展示。< / p>

Susy将内容放在全宽div中

1 个答案: