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

Posted 2023-03-06

【中文标题】如何用 div 填充边距空间并赋予其样式？

【英文标题】：How to fill margin space with divs and give it styles?

【发布时间】：2016-02-15 13:29:26

【问题描述】：

对于我的网站，我想在标题上放置一个横幅（包括徽标、菜单等所有内容），它覆盖了 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;
    

【参考方案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;