CSS聖盃佈局

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

我理解的方式是：

colmask只是一個包裝頁眉和頁腳的內容
colmid是，我想另一個包裝定位可容納一些瀏覽器如IE7
colleft是真品的包裝（不知道爲什麼這麼多包裝）
COL1，COL2和COL3是真實的事情，都留下浮動，並設置他們的利潤來調整屏幕

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

2010-09-22 Lorenzo

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

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

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

步驟一步，它的工作原理是這樣的：

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

<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>

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

來源

2011-10-23 21:14:47

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

我想出了與所有建議在那裏感到沮喪之後，此佈局。它的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>

來源

2013-06-03 17:30:03

CSS聖盃佈局

回答

相關問題