藍圖CSS網格佈局異常

我正在爲我的網站項目調整Blueprint CSS框架，但我注意到藍圖未遵循其自己的一些規則。我已經瀏覽了他們網站上的教程，並嘗試使用谷歌搜索解決方案，但沒有任何工作。藍圖CSS網格佈局異常

我試圖建立一個頁面佈局，像這樣：

----------------------------------------------------------------------- 
| Image      (header)    950px    | 
----------------------------------------------------------------------- 
|Navbar |    Body (560px)       | Ad Bar| 
|  |              |(190px)| 
| 200px |              |  | 
|  |              |  | 
    ...      .....        ... 
|  |              |  | 
----------------------------------------------------------------------- 
|       (footer)   950px     | 
-----------------------------------------------------------------------

我想身體通過導航欄的側翼（以右邊界）和廣告欄（用左 - 高度擴展以匹配身體的高度（縮放比例取決於內容的數量）以及簡單地粘貼到底部的頁腳。到目前爲止，標題和正文顯示完美。但是，導航欄不能跨越身體的高度。此外，廣告欄不會出現在車身右側，而是包裹到最左側（導航欄左側和車身下方）。 Footer似乎並沒有與網站的其他部分保持一致，因爲我寫它是爲了對齊文本，但是它偏離了中心（稍微偏左）。

這裏是我的HTML5代碼：

<!DOCTYPE html> 

<html lang="en"> 
    <head> 
     <meta charset="utf-8" /> 

     <link rel="stylesheet" href="blueprint/screen.css" type="text/css" media="screen, projection" /> 
     <link rel="stylesheet" href="blueprint/print.css" type="text/css" media="print" /> 
     <!--[if lt IE 8]> 
      <link rel="stylesheet" href="blueprint/ie.css" type="text/css" media="screen, projection" /> 
     <![endif]--> 

     <!--Import fancy-type plugin. --> 
     <link rel="stylesheet" href="blueprint/plugins/fancy-type/screen.css" type="text/css" media="screen, projection" /> 

     <link rel="stylesheet" href="style.css" type="text/css" media="screen, projection" />  

     <title>My Web Site Home</title> 
    </head> 

    <body> 
     <div class="container"> 
      <!-------------------------------------------------------> 
      <div id="header" class="span-24" style="background: #F68712"> 
       <h1 id="siteheader"><img src="logo.png" alt="Logo" id="header-image" /></h1> 
      </div> 
      <div id="sidebar" class="span-5"> 
       <div class="span-6"> 
        <a href="#"><img src="home.png" alt="Home" /></a></li> 
       </div> 
       <div class="span-6"> 
        <a href="#"><img src="newmember.png" alt="Member Sign Up" /></a> 
       </div> 
       <div class="span-6"> 
        <a href="#"><img src="memberlist.png" alt="Member List" /></a> 
       </div> 
      </div> 
      <div id="main" class="span-12 prepend-1 append-1" style="background: #F5F5DC"> 
       <p>Some text.</p> 

       <p>Some more text.</p> 

       <p>Even more text!</p> 
      </div> 
      <div id="adbar" class="span-5 last"> 
       Ads. 
      </div> 
      <div id="footer" class="span-24" style="text-align: center"> 
       <h6 class="alt">Copyright &copy;2012 Joe Schmo.</h6> 
      </div> 
      <!-------------------------------------------------------> 
     </div> 
    </body> 
</html>

我已經照着所有網站上的英文教程，但似乎無法弄清楚爲什麼它不希望合作。我正在使用Microsoft Webmatrix開發我的網站，並在IE9和Chrome中預覽我的網站。如果任何人可以伸出援手，我會真的欣賞它。

謝謝！

來源

2012-12-16 Argus9

<hr style="clear:both; width:100%" />

嘗試這只是頁腳DIV

來源

2012-12-16 19:09:39 shinosn

不幸的是，它放置了分隔線，但它仍然比容器更長，並且頁面文字在網頁最大化時仍偏離中心。 – Argus9

爲了您的側邊欄之前，你有一個類的跨度-5還包含跨度6的3個div的。如果您刪除三個菜單div的class屬性，我假設您希望它們是包含div的全部寬度，這是否解決了您的問題？

來源

2012-12-16 20:39:40

謝謝你的回覆，戴夫。圖像上的span-6是我在發佈後修復的一個錯字，但它沒有解決我遇到的問題。奇怪的是，我嘗試複製並粘貼上面提到的代碼，修正了錯字，現在IE9中的廣告欄看起來是正確的，但在Chrome中完全沒有出現。很奇怪。 – Argus9

藍圖CSS網格佈局異常

回答

相關問題