Question

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

到目前为止很容易。

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

问题：

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

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

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

我的结构/代码的基础是在一行中排列的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;
    }
}

Answer 1

你可以使用JS或jQuery。

只需计算uploadSession.UploadUrl await client.AuthenticationProvider.AppendAuthHeaderAsync(httpRequestMessage)的宽度与寡妇宽度之间的差异，然后将其除以2，以获得两边相等的值。

<强>的jQuery

.center

实际上，我猜你也可以用CSS的<div>做到这一点，但这个动态稍微不那么强，因为你必须输入$(".left, .right").css({width: ($(window).width - $(".center").width()) / 2}); calc()的宽度（1000px在你的情况下）：

<强> CSS

.center

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

如何用div填充边距空间并给它样式？

2 个答案: