2010-09-22 75 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>