1

我有一个奇点布局，可以在“容器”的任一侧进行填充，就像这里的奇点问题中提出的那样： https ://github.com/Team-Sass/Singularity/issues/91

.container {
  // Sets a max width. Site will be fluid until it reaches 960px, then stick there.
  max-width: 960px;
  // Centers the container.
  margin: 0 auto;
  // Sets padding equal to a gutter.
  padding-left: gutter-span();
  padding-right: gutter-span();
  // Might as well clearfix it as well.
  @include clearfix;
}

这样做的基本要求是两边都有一个间隙，所以它在较小的屏幕上看起来很缓冲。

我不明白的是我会@include background-grid在开发时使用什么元素来显示网格。

如果我把它放在.container然后网格将显示在填充下，这实际上不是网格的一部分。当然，我可以在其中创建一个元素，但该元素纯粹是出于视觉开发目的，因此一旦我关闭网格显示就变得多余了。

您可以在下面的图像中看到黑线如何延伸到其父级的边缘，.container但网格超出了该范围。

在此处输入图像描述

4

1 回答 1

0

因此，您使用填充将排水沟添加到容器。背景恰好延伸到填充排水沟，因此您的网格已关闭。

正面解决方案是使用子容器。将填充物应用于外部容器。将 clearfix 和网格背景应用于内部容器。

background-clip: content-box确实是更好的解决方案。无论如何，您不需要在 IE8 中调试网格背景。

于 2014-08-21T14:02:27.700 回答