雙飛翼佈局和聖盃佈局

時間 2019-12-05

標籤雙飛佈局简体版

原文原文鏈接

雙飛翼佈局：html

<!DOCTYPE html>
<html>
<head>
 <meta charset="UTF-8">
 <title>Holy Grail of Layouts</title>
</head>
<style>
 #page{
          width:980px;
          margin:0 auto;
 }
 #hd{
          width: 980px;
        background-color:#cccccc;
        height:100px;
 }
 #bd{
          zoom:1;
          overflow:hidden;//消除bd的內部浮動，使footer不會和bd重合  
 }
 .main-wrap{
           margin:0 190px 0 190px;
           background-color:blue; 
           min-height:180px; 
 }
 .main {        
           float: left;       
           width: 100%;

  }  
  .sub {       
           float: left;        
           width: 190px;        
           margin-left: -100%;
           background-color:yellow;    
           min-height:30px; 
           /*position:relative;
           left:-190px;*/
    }   
    .extra {        
          float: left;        
          width: 190px;        
          margin-left: -190px; 
          background-color:green; 
          min-height:30px;  
         /* position:relative;
          left:-380px;*/
  }
  #ft{
   width: 980px;
        background-color:#cccccc;
        height:100px;
  }
</style>
<body>
 <div id="page">    
      <div id="hd"></div>    
         <div id="bd">        
              <div><div>asd fsdafasd fsdafasd fsdafasd fsdafasd </div> </div>        
              <div>.sub {       
           float: left;        
           width: 190px;        
           margin-left: -100%;
           background-color:yellow;    
    } </div>        
              <div>.extra {        
          float: left;        
          width: 190px;        
          margin-left: -190px; 
          background-color:green;  
  }</div>    
         </div>   
      <div id="ft"></div>
    </div>
</body>
</html>

聖盃佈局：瀏覽器

<!DOCTYPE html>
<html>
<head>
 <meta charset="UTF-8">
 <title>Holy Grail of Layouts</title>
</head>
<style>
 #page{
  width:980px;
  margin:0 auto;
 }
 #hd{
  width: 980px;
        background-color:#cccccc;
        height:100px;
 }
 #bd{
  
  zoom:1;
        overflow:hidden;
        padding:0 190px 0 190px;
       
 }
 .main {        
           float: left;       
           width: 100%;
           background-color:blue; 
           min-height:180px; 
        
  }  
  .sub {       
           float: left;        
           width: 190px;        
           margin-left: -100%;
           background-color:yellow;    
           min-height:30px; 
           position:relative;
           left:-190px;
    }   
    .extra {        
          float: left;        
          width: 190px;        
          margin-left: -190px; 
          background-color:green; 
          min-height:30px;  
          position:relative;
          right:-190px;
  }
  #ft{
   width: 980px;
        background-color:#cccccc;
        height:100px;
  }
</style>
<body>
 <div id="page">    
      <div id="hd"></div>    
         <div id="bd">        
              <div><div>asd fsdafasd fsdafasd fsdafasd fsdafasd </div> </div>        
              <div>.sub {       
           float: left;        
           width: 190px;        
           margin-left: -100%;
           background-color:yellow;    
    } </div>        
              <div>.extra {        
          float: left;        
          width: 190px;        
          margin-left: -190px; 
          background-color:green;  
  }</div>    
         </div>   
      <div id="ft"></div>
    </div>
</body>
</html>

效果圖以下：佈局

兩個佈局的思想都是但願中間的內容區域能都先加載，因此把main寫在了bd的第一項已達到在瀏覽器中優先渲染的效果。可是main寫在了第一項以後，就不會展現在瀏覽器的中間，這個時候使用浮動和負的外邊距設置使左右兩個放置在main兩邊。code

到了這個位置，兩邊的側邊欄已經位於了main的兩側了，可是我發現main中的文字並無顯示，那是由於兩側的側邊欄遮住了內容。這個時候就分紅了雙飛翼佈局和聖盃佈局。htm

聖盃佈局是原理是：調整bd的內邊距，發現main縮小了，可是兩個側邊欄也跟着移動了，這個時候使用position爲ralative設置側邊欄的左右兩邊，就能夠完成最終的效果了。it

雙飛翼佈局的原理是：並非調整bd的內邊距，而是在main的內部再加入一個div，main-warp，調整main-wrap的外邊距，就能夠達到一樣的效果了。io

相關標籤/搜索

每日一句

每一个你不满意的现在，都有一个你没有努力的曾经。