如何用 div 填充边距 space 并赋予它样式？

Question

对于我的网站，我希望在我的 header 上有一个横幅（带有徽标、菜单等所有内容），它覆盖 100% 的屏幕宽度。

到目前为止还不错。

但是现在，在一定的屏幕分辨率之后，横幅应该停止填充 100%，所以我只给了一个 max-width: 1000px; 和一个 margin: 0 auto; 来让我的横幅居中。

问题：

在此示例中，当屏幕宽度超过 1000px 时，我将得到 margin left 和 margin right，具体取决于屏幕宽度减去 1000px。

我希望每个边距都具有渐变颜色或其他人可能想要的任何其他样式。

为此，我创建了一个结构（如下），它缺少我不知道的魔法代码，甚至可能需要一个完全不同的解决方案。

我的结构/代码的基础是 3 个 div，它们排成一排，中间是我的横幅。

我没有进一步说明的是如何给出与剩余 space 相匹配的“边距/填充”宽度。

示例结构：

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;
    }
}

Answer 1

您可以使用 JS 或 jQuery。

简单计算一下.center<div>的宽度和寡妇宽度的差值，然后除以二就两边相等

jQuery

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

实际上，我猜你也可以用 CSS 的 calc() 来做到这一点，但这有点不那么动态，因为你必须输入 .center <div>（你的情况是 1000px）：

CSS

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

Answer 2

我认为您的代码完美地添加了屏幕和媒体 DEMO

@media screen and(min-width: 1000px)
{
It says apply style for device with a screen and a window with min-width
}

/*getting rid of the "fill ups" below breakpoint 1000px"*/
@media screen and (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 and (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;
    }
}

如何用 div 填充边距 space 并赋予它样式？

How to fill margin space with divs and give it styles?

html

css

width

responsive-design