如何使用div填充保證金空間併爲其提供樣式？

Question

對於我的網站，我希望在我的標題（包含徽標，菜單等所有內容）上有一個橫幅，它覆蓋我的屏幕寬度的100％。

到目前爲止很好，很容易。

但是現在，在橫幅應該停止填充100％的某個屏幕分辨率之後，所以我只給了一個max-width: 1000px;和一個margin: 0 auto;來集中我的橫幅廣告。

問題：

在這個例子中，當屏幕寬度超過1000像素我會得到一個margin left和margin right根據屏幕寬度減去1000像素。

我希望每個邊距具有漸變色或其他人可能想要的任何其他樣式。

爲此我創建了一個結構（下圖），它缺少我不知道的魔法代碼，或者甚至需要一個完全不同的解決方案。

我的結構/代碼的基礎是3行與我的旗幟在中心排成一行。

的地步，我沒有進一步的來任何是如何給「利潤/填充UPS」寬度相匹配的剩餘空間

結構示例：

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>的寬度（1000像素在你的情況）：

CSS

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

Answer 2

我覺得你的代碼是完美添加屏幕，並在媒體DEMO

@media屏幕（最小寬度：1000像素）
{
它說，申請樣式設備與屏幕和窗口與最小寬度
}

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