html - 如何用div填充边距空间并指定样式？

对于我的网站，我想在我的标题上有一个横幅（包括所有的东西，如标志，菜单），它覆盖了我的屏幕宽度的100%。
到目前为止还不错。
但现在，在屏幕分辨率达到一定值后，横幅应该停止填充100%，
所以我只给了一个max-width: 1000px;和一个margin: 0 auto;来对中我的横幅。
问题是：
在本例中，当屏幕宽度超过1000px时，根据屏幕宽度减去1000px，我将得到amargin left和margin right。
我希望每个边距都有渐变色或其他任何其他风格，其他人可能希望有。
为此，我创建了一个结构（如下），它缺少我不知道的魔法代码，或者它甚至需要一个完全不同的解决方案。
我的结构/代码的基础是3个div在一行中对齐，我的横幅在中间。
我没有进一步讨论的地方是如何给出与剩余空间匹配的“边距/填充”宽度。
示例结构：
HTML格式

<div class="container">
    <div class="left"></div>
    <div class="right"></div>
    <div class="center"></div>
</div>

CSS

.container {
    width: 100%;
    height: 200px;
}
.center {
    width: 100%;
    /*below breakpoint 1000px*/

    max-width: 1000px;
    /*above breakpoint 1000px*/

    height: 200px;
    background: green;
    margin: 0 auto;
}
/*getting rid of the "fill ups" below breakpoint 1000px"*/

@media screen (max-width: 1000px) {
    .left {
        width: 0px;
        height: 0px;
    }
    .right {
        width: 0px;
        height: 0px;
    }
}
/*generating "fill ups" for remaining space between screen border and "center" (left and right)*/

@media screen (min-width: 1001px) {
    .left {
        width: 200px;
        /* width:50%; would like to have 50% of the remaining space (left)*/

        height: 200px;
        background: red;
        float: left;
    }
    .right {
        width: 200px;
        /* width:50%; would like to have 50% of the remaining space (right)*/

        height: 200px;
        background: blue;
        float: right;
    }
}

最佳答案

您可以为此使用js或jquery。
只需计算.center<div>的宽度和窗口宽度之间的差，然后将其除以2，得到两边相等的宽度。
jquery公司

$(".left, .right").css({width: ($(window).width - $(".center").width()) / 2});

实际上，我想你也可以用css的calc()来实现这一点，但这稍微不那么动态，因为你必须输入.center<div>的宽度（在你的例子中是1000px）：
CSS

.left, .right {
    width: calc((100% - 1000px) / 2);
}