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

Question

我在布局结构方面遇到了问题。

这是一个模型:http://i.imgur.com/JbboQ.jpg

和代码:

<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，这非常好，但问题是 slider 具有 100% 的背景，而父 div 的宽度为 980px。也许为时已晚，但我就是找不到合适的语义解决方案。

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

谢谢。

Answer 1

有几件事你可以尝试:

1. 分离出您的 slider 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% }
   

2. 或者您可以将 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 }
   

注意:您必须调整 slider div 的位置。