Question

有人可以为我分解构成圣杯布局的部分，如此处所示切换div定位吗？ http://matthewjamestaylor.com/blog/perfect-3-column.htm

我理解的方式是：

colmask只是在页眉和页脚之间定位内容的包装器
colmid是另一个包装器，我想它可以容纳一些浏览器，如IE7
colleft是真品的包装（不知道为什么这么多包装纸）
col1，col2和col3是真实的，都是左边浮动并设置边距以调整它们在屏幕上的外观

有人可以更好地解释那个设计的禅意是什么吗？我正试图将它应用到现实世界的场景中，但它并没有真正发挥作用。

Answer 1

在对所有建议感到沮丧之后，我想出了这个布局。它的HTML5 / CSS3兼容并适用于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>

Answer 2

圣杯是一种3柱液体布局，无论有多少内容，三列的长度都相同。列应该在html中为2-3-1顺序（对于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％。将col宽度设置为总计100％（40％，30％，30％）。对两种类型进行相对定位。
现在所有的彩色div都在彼此之上。通过设置正确的属性滑动列颜色包装div。单独留出容器吧。将容器中间移动超过30％，露出下面的颜色。将容器向左移动以显示两者。
现在内容位于视口的左侧。使用相同的技术将每个div推入到位，但这次使用left属性。
最后，通过设置溢出来隐藏额外的内容：隐藏在最外面的包装器上。请注意，您必须在外部div上将定位设置为relative，否则此步骤将无法在IE中使用。

CSS圣杯布局

2 个答案: