避免容器 div
假设您有一个网站，并且有一个精美的粉红色标题，该标题水平延伸到整个屏幕。标题内部有一些文本需要居中并具有 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;
}
这将“解决问题”并在调整视口大小后进行缩放。
Say you have a website and have a fancy pink header which stretches all across your screen horizontal. Inside the header there some text which needs to be centered and have a 960px fixed width area.
---------------------------
| x | hello | x |
| |
| y | hi | y |
---------------------------
x = pink background row
y = yellow background row
Does someone has an up to date css (no js) solution to dismiss the need of a container div just often for padding?
html:
<header>
<div>
hello
</div>
</header>
<footer>
<div>
hi
</div>
</footer>
css:
header {
background: pink;
}
header > div {
width: 960px;
margin:0 auto;
}
Does someone has a solution, maybe something with pseudo before and after?
So you can just write beautiful html:
<header>hello</header>
<footer>hi</footer>
and fix it all in css.
This is a basic example, the point is; I am often bound to use a div just for layout things, mostly padding. Of course I can set seperate background to do the trick, but I am talking about keeping this all together, since, the probably has the same issue and another background. And same with the main content, and so on.
Wish there was something like:
header{
background: pink;
padding: 100%-960px;
}
That would 'do the trick' and scales after resizing the viewport.
如果你对这篇内容有疑问，欢迎到本站社区发帖提问 参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。
绑定邮箱获取回复消息
由于您还没有绑定你的真实邮箱，如果其他用户或者作者回复了您的评论，将不能在第一时间通知您！
发布评论
评论（1）
通常我只会使用多个容器 div 和一个容器类...就像 hello 和 hi 都在一个带有“包装类”的 div 中，x 和 y 都是 100% 宽度的包装器的包装器 div。
但由于您的目标是避免包装 div...那么我不会详细介绍如何使用 4 个包装 div 来实现此目的:)
我认为您应该查看这些链接：
Typically I would just use multiple container divs, with a container class... Like hellow and hi would both be in a div with "wrapper class", and x and y would both be 100% width wrapper-of-wrapper divs.
But since your goal is to avoid wrapper divs... then I won't go into detail about how you can accomplish this with 4 wrapper divs :)
I think you should look into these links: