css - CSS 固定宽度 + 100% 填充。一个容器可以吗？

Question

我需要制作具有 100% 宽度和渐变背景的 ui 控制面板。此控制面板上的 UI 元素的宽度应为 1000 像素并且应居中。

暂时我有两个元素：面板（宽度 100%，渐变背景），全局包装器面板包装器（宽度 1000 像素，透明背景），放置在“面板”元素内，包含 UI 元素。

它在我需要的所有浏览器中都表现出色，但我真的不喜欢使用两个 HTML 元素，从逻辑上讲它应该只是一个。也许可以有一个固定宽度（1000px）和自动填充的元素“面板”，它将覆盖左侧和右侧的所有可用空间？（如果我的解释很疯狂，我已经制作了一张图片来展示它:)）

在此处输入图像描述

有可能的？

score 1 · Accepted Answer

您可能会使用该calc()功能，尽管它不是高度兼容浏览器的。

这是一个简单的示例，有关兼容性和使用的更多信息可以在这里找到。

*我在 Firefox 中制作了示例，没有在其他地方进行测试。

只是一个快速的代码示例，下面显示了一个解决方案：

div {
    width: 100px;
  background-color: blue;
  height: 100px;
  padding-left: calc(50% - 50px);
  padding-right: calc(50% - 50px);

}

score 1 · Accepted Answer

挑战在于您不能真正将百分比和固定宽度与传统意义上的填充结合起来，因为填充被添加到总宽度中。

如果总宽度为 100%，并且您希望中心的内容为 500px，则无法计算填充。

但是，使用 CC3，您可以使用box-sizing更改填充在盒子模型中的“位置”。

唉，我仍然认为这不会让你想要你想要的，因为仍然有一个未知的变量在起作用（100% 宽度对象所在的容器的宽度）。

最后，我们有时会以过度优化的名义过度思考这些解决方案。在这种情况下，额外的 div 似乎是完全可以接受的，并且很可能是正确的解决方案。

score 0 · Accepted Answer

为什么padding？

您可以将左右边距设置为auto，这将使 div 居中..

所以只要设置

.panel{
    width:1000px;
    margin:0 auto;
}

3 回答 3