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的宽度，这是完全没问题，但问题是滑块有100％的背景而且父div有980px。也许现在为时已晚，但我找不到合适的语义解决方案。

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

感谢。

Answer 1

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

将滑块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% }

或者您可以将滑块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 }

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

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

1 个答案: