佈局 - 父div是980px，子必須是100％

這裏是一個樣機：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>

我想最簡單的方法是隻需添加寬度風格到每個格但比我將無法嵌套樣式這不是一個選項。

現在#home div有980px的寬度，這是非常好的，但問題是滑塊有100％的背景，父div有980px。也許已經太晚了，但我無法找到適當的和語義的解決方案。

，我會很高興，如果有人可以幫助我在這裏，

感謝。

來源

2012-01-18 HunterListInsight

Slidebox在家中。所以100％寬度的滑塊意味着寬度是980px。你的問題實際上是什麼？ – srijan 2012-01-18 21:01:33

混淆你的問題到底是什麼。是否你希望滑塊爲980像素（與其父母相同，#home），而是100％的頁面寬度？ – 2012-01-18 21:02:48

抱歉誤會; sliderbox有980px的寬度，但也是一個100％寬的背景，實際上應該在home div之外。這就是問題 - 如何在滑塊下面放置100％背景？ – HunterListInsight 2012-01-18 21:08:14

有一對夫婦的事情，你可以嘗試：

分離出的滑塊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的定位。

來源

2012-01-18 21:27:33 Rich

佈局 - 父div是980px，子必須是100％

回答

相關問題