Question

假设您有一个网站，并且有一个花哨的粉红色标题，横跨您的屏幕横向延伸。在标题内部有一些文本需要居中并且具有960px的固定宽度区域。

---------------------------
|   x   |  hello   |   x   |
|                          |
|   y   |  hi      |   y   |
---------------------------

x =粉红色背景行 y =黄色背景行

有人有一个最新的css（没有js）解决方案，只是为了填充而不经常需要容器div吗？

HTML：

<header>
    <div>
        hello
   </div>
</header>
<footer>
    <div>
        hi
   </div>
</footer>

的CSS：

header {
  background: pink;
}
header > div {
  width: 960px;
  margin:0 auto;
}

有人有解决方案，也许是之前和之后有伪的东西？所以你可以写出漂亮的HTML：

<header>hello</header>
<footer>hi</footer>

并在css中修复所有内容。

这是一个基本的例子，重点是;我经常使用div只是为了布局，主要是填充。当然，我可以设置单独的背景来做这个伎俩，但我说的是将这一切保持在一起，因为，可能有相同的问题和另一个背景。与主要内容相同，等等。

希望有类似的东西：

header{
  background: pink;
  padding: 100%-960px;
}

这将“诀窍”并在调整视口大小后进行缩放。

Answer 1

通常我会使用多个容器div，带有容器类...就像hellow和hi一样，它们都在带有“包装类”的div中，而x和y都是100％宽度的包装器包装器的div。

但是因为你的目标是避免包装div ...然后我不会详细介绍如何使用4个包装div来实现这一点：）

我认为你应该看看这些链接：