2010-09-22 4 views
1

能有人打破了我撰寫的聖盃佈局與切換DIV定位爲在這裏看到的作品? http://matthewjamestaylor.com/blog/perfect-3-column.htmCSS聖盃佈局

我理解的方式是:

  • colmask只是一個包裝頁眉和頁腳的內容

  • colmid是,我想另一個包裝定位可容納一些瀏覽器如IE7

  • colleft是真品的包裝(不知道爲什麼這麼多包裝)

  • COL1,COL2和COL3是真實的事情,都留下浮動,並設置他們的利潤來調整屏幕

自己的外貌有人能更好地解釋那是什麼設計的禪?我試圖將它應用於真實世界的場景,但它並不真正起作用。

+1

你看過:http://www.alistapart.com/articles/holygrail/? – 2010-09-22 12:28:26

+0

那個人使用的是不同的技術,但是我會繼續冥想,看看我能否更好地理解我所指的其他聖盃 – Lorenzo 2010-09-22 12:51:27

回答

3

的聖盃是一個三欄液體佈局,其中三列都是一樣的長度,無論含量多少有。他的專欄應該在2-3-1的順序在HTML(對於SEO)。這個想法是將內容從背景顏色中分離出來並放入不同的div中。一個浮動容器div始終是它浮動內容的高度,所以這裏發生的是每個內容div,都有一個相對定位的浮動容器div。這三個包裝。

步驟一步,它的工作原理是這樣的:

  1. 建立嵌套的三個嵌套包裝內三列。

    <div id="container-right"> 
        <div id="container-middle"> 
        <div id="container-left"> 
         <div id="col1">Column 1</div> 
         <div id="col2">Column 2</div> 
         <div id="col3">Column 3</div> 
        </div> 
    </div> 
    

  2. 浮動時間都並設置其背景顏色(記住,COL1爲中心!)
  3. 設置包裝寬度爲100%。將色譜柱寬度設置爲總計100%(40%,30%,30%)。使他們的定位相對於這兩種類型。
  4. 現在所有的彩色div都在彼此之上。通過設置正確的屬性來滑動列顏色包裝器div。保留容器 - 單獨。將容器中間移動超過30%,以顯示下方的顏色。移動容器 - 留下更多以揭示兩者。
  5. 現在,內容位於視口的左側。使用相同的技術將每個div推入到位,但這次使用左側的屬性。
  6. 最後,通過設置溢出來切斷額外:隱藏在最外面的包裝上。請注意,您必須將定位設置爲相對於外部div,否則此步驟在IE中不起作用。
+0

好的解釋! – CapelliC 2011-10-23 21:23:34

4

我想出了與所有建議在那裏感到沮喪之後,此佈局。它的HTML5/CSS3的complient和工作在IE8 +和至少FF21 - 我還沒有在其他版本和瀏覽器測試。但是如果你在尋找一個流暢的佈局 - 這個效果很好。

<!DOCTYPE html> 
<html> 

<head> 
    <title>Canvas</title> 
    <style type="text/css"> 

    * {padding:0px; margin:0px;} 
    html, body {width:100%; height:100%;} 

    #page {width:100%; height:100%;position:relative;} 

    #page > #header { 
     position:absolute; 
     top:0px; 
     left:0px; 
     right:0px; 
     height:64px; 

     background:#ccc; 
     } 

    #page > #body { 
     position:absolute; 
     top:64px; 
     left:0px; 
     right:0px; 
     bottom:64px;  
     } 

     #page > #body > #left { 
      position:absolute; 
      top:0px; 
      left:0px; 
      bottom:0px; 
      width:192px; 

      background:#bbb; 
      } 

     #page > #body > #center { 
      position:absolute; 
      top:0px; 
      left:192px; 
      right:192px; 
      bottom:0px; 
      } 

     #page > #body > #right { 
      position:absolute; 
      top:0px; 
      right:0px; 
      bottom:0px; 
      width:192px; 
      background:#bbb; 
      } 

    #page > #footer { 
     position:absolute; 
     bottom:0px; 
     right:0px; 
     left:0px; 
     height:64px; 
     background:#ccc; 
     } 

    </style> 
</head> 

<body> 
    <div id="page"> 
    <div id="header"></div> 
     <div id="body"> 
     <div id="left"></div> 
     <div id="center"></div> 
     <div id="right"></div> 
     </div> 
    <div id="footer"></div> 
    </div> 
</body> 

</html>