div上的全寬背景顏色

我正在使用1120px的css響應式框架響應，或者它可以在我需要時充當固定的網格。div上的全寬背景顏色

我有一個div在1120px的容器div內我想應用全寬的背景色。

div的背景顏色當然只在容器div內，我想讓它填充body元素的整個寬度。

現在的問題是，div是由shortcode自動生成的，所以我無法創建一個外部div並將其設置爲100％寬度。

下面是從短碼的標記：

<div class="toggle-default"> 
    <div class="toggle"> 
<div class="toggle_title toggle_active">LINE-UP</div> 
<div class="toggle_content" style="display:block;">Lorem ipsum sit dolor amet</div> 

</div> 
    </div>

這個CSS：

.toggle{ margin-bottom: 5px; 
clear: both; float: left; 
position: relative; 
width: 100%;     
} 
.toggle .toggle_title { 
position: relative; 
font-size: 112.5%; 
font-weight: 700; 
padding-bottom: 15px; 
padding-left: 25px; 
text-decoration: none; 

}

，這裏是一個FIDDLE

現在的問題是，這個標記是下一個容器div有1120px寬度。我想加在.toggle .toggle_title position：absolute;並設置最小寬度爲1480像素，但隨後一切都會中斷。

我相信這是解決這類問題的更好方法。任何人都可以給我一些關於如何使這項工作的提示？謝謝！

來源

2013-04-09 agis

使用http://www.jsfiddle.net實際顯示正在發生的事情將幫助您獲得更多答案。 – herinkc 2013-04-09 20:21:36

你不喜歡將背景顏色設置爲'body'元素嗎？ – pzin 2013-04-09 20:34:12

你想要將背景色應用於哪個div？ – vtacreative 2013-04-09 20:42:46

這是一個非常醜陋的做法。我發佈這個期望有人downvoting這個......但它的作品。

這裏有一個撥弄它http://jsfiddle.net/5mn22/8/

添加到您的CSS：

.toggle_title, .toggle_content { 
    position:relative; 
    z-index:2; 
} 

.toggle:before { 
    content:""; 
    width:4000px; 
    position:absolute; 
    height:100%; 
    background-color:red; 
    left:-50%; 
    z-index:1 
}

基本上，只要添加的div之前空內容與寬度預計屏幕分辨率和它的位置大小的兩倍向左邊50％以確保它延伸整個距離。

您認爲如何？

來源

2013-04-09 21:51:29 ntgCleaner

我不在乎關於樣式元素的語義，而且這個工作正常但是這對所有主流瀏覽器都適用？ – agis 2013-04-09 22:47:12

：之前和之後：CSS2 + http://www.w3schools.com/cssref/css_selectors.asp和z-index適用於所有主流瀏覽器。你只是不能z - 索引：繼承ie7 - http://www.w3schools.com/cssref/pr_pos_z-index.asp – ntgCleaner 2013-04-09 22:50:00

謝謝！現在有一個小問題：當我使用不同的背景元素時，如何使用：nth-child（）屬性，第一個切換將具有紅色背景，第二個切換爲藍色，等等...... – agis 2013-04-09 23:07:33

試用思考不同的改變CSS參數，而不是使用background-color。我曾與:box-shadow parametr測試它：

.toggle { 
     box-shadow: -10vw 0px 0px 0px #0e1d42, -28vw 0px 0px 0px #0e1d42, -42vw 0px 0px 0px #0e1d42, -30vw 0px 0px 0px #0e1d42, -46vw 0px 0px 0px #0e1d42, -15vw 0px 0px 0px #0e1d42; 
     -webkit-box-shadow: -10vw 0px 0px 0px #0e1d42, -28vw 0px 0px 0px #0e1d42, -42vw 0px 0px 0px #0e1d42, -30vw 0px 0px 0px #0e1d42, -46vw 0px 0px 0px #0e1d42, -15vw 0px 0px 0px #0e1d42; 
     -moz-box-shadow: -10vw 0px 0px 0px #0e1d42, -28vw 0px 0px 0px #0e1d42, -42vw 0px 0px 0px #0e1d42, -30vw 0px 0px 0px #0e1d42, -46vw 0px 0px 0px #0e1d42, -15vw 0px 0px 0px #0e1d42; 
}

看看活生生的例子（藍色行）^ http://kreditka.testovi-site.pw

問候，最大

來源

2017-10-29 15:24:28

div上的全寬背景顏色

回答

相關問題