Html 布局-父div为980px，子div必须为100%

我的布局结构有问题

这是一个模型：

和代码：

<ul id="nav">
    <li></li>
</ul>
<div id="home">
    <div class="slider">
        <div class="heading"></div>
        <div class="slidebox"></div>    
    </div> 
    <div class="col1"></div>
    <div class="col2"></div>
    <div class="col3"></div>
</div>

我想最简单的方法就是在每个div中添加宽度样式，但是我不能嵌套样式，这不是一个选项

现在#home div的宽度为980px，这很好，但问题是滑块有100%的背景，而父div的宽度为980px。也许已经太晚了，但我就是找不到合适的语义解决方案

如果有人能帮我，我会很高兴的

---

谢谢。

您可以尝试以下几种方法：

分开你的滑块div，这样你可以得到100%的页面宽度

<div id="home">
    ...
</div>
<div class="slider">
    <div class="heading"></div>
    <div class="slidebox"></div>    
</div>
<div id="columns">
    <div class="col1"></div>
    <div class="col2"></div>
    <div class="col3"></div>
</div>

.slider { width: 100% }

...
.滑块{宽度：100%}

或者可以将slider div的z-index属性设置为高于主视图索引的数字，以便它在顶部渲染

<div id="home">
    <div class="col1"></div>
    <div class="col2"></div>
    <div class="col3"></div>
</div>
<div class="slider">
    <div class="heading"></div>
    <div class="slidebox"></div>    
</div>

.home { width: 980px; z-index: 1 }
.slider { width: 100%; position: relative; top:-50; z-index: 2 }

.home{宽度：980px；z索引：1}
.滑块{宽度：100%；位置：相对；顶部：-50；z索引：2}

---

注意：您必须调整滑块div的位置。

滑块盒在主屏幕内。所以100%的滑块宽度意味着家的宽度，即980px。你的问题到底是什么？对你的问题到底是什么感到困惑。您是否希望滑块为980px（与其父级#home相同），而不是100%的页面宽度？抱歉误解；sliderbox的宽度为980px，但也有一个100%宽的背景，实际上应该在主分区之外。这就是问题所在-如何将100%背景放在滑块下方？@erzor:看一看。在那里，

#home

的宽度为200px，

滑块在使用
宽度：100%时继承该宽度。我想你可能想发布你的CSS。很抱歉我没有回复，我已经用几乎相同的解决方案完成了，谢谢。