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上的全宽背景颜色

回答

相关问题