如何用 div 填充边距空间并赋予其样式？答案

【问题标题】：How to fill margin space with divs and give it styles?如何用 div 填充边距空间并赋予其样式？
【发布时间】：2023-03-26 01:35:01
【问题描述】：

对于我的网站，我想在标题上放置一个横幅（包括徽标、菜单等所有内容），它覆盖了 100% 的屏幕宽度。

到目前为止一切顺利。

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

问题：

在本例中，当屏幕宽度超过 1000 像素时，我将根据屏幕宽度减去 1000 像素得到margin 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;
    }
}

【问题讨论】：

标签： html css responsive-design width

【解决方案1】：

您可以使用 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);
}

【讨论】：

【解决方案2】：

我认为你的代码是完美的添加屏幕和媒体DEMO

@media screen and(min-width: 1000px)
{
它说为具有最小宽度的屏幕和窗口的设备应用样式
}

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

【讨论】：