CSS | 聖盃佈局、雙飛翼佈局 | 自適應三欄佈局

聖盃佈局和雙飛翼佈局是前端工程師需要日常掌握的重要佈局方式。兩者的功能相同，都是為了實現一個兩側寬度固定，中間寬度自適應的三欄佈局

雖然兩者的實現方法略有差異，不過都遵循了以下要點：

1.兩側寬度固定，中間寬度自適應
2.中間部分在DOM結構上優先，以便先行渲染
3.允許三列中的任意一列成為最高列
4.只需要使用一個額外的<div>標籤

聖盃佈局

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title>聖盃佈局</title>
        <style type="text/css">
            .header{
                height:50px;
                background: #666;
                text-align: center;
            }
            .main{
                /*左右欄通過新增負的margin放到正確的位置了，此段程式碼是為了擺正中間欄的位置*/
                padding:0 200px 0 180px;
                height:100px;
            }
            .middle{
                float:left;
                width:100%;/*左欄上去到第一行*/
                height:100px;
                background:blue;
            }
            .left{
                float:left;
                width:180px;
                height:100px;
                margin-left:-100%;
                background:#0c9;
                /*中間欄的位置擺正之後，左欄的位置也相應右移，通過相對定位的left恢復到正確位置*/
                position:relative;
                left:-180px;
            }
            .right{
                float:left;
                width:200px;
                height:100px;
                margin-left:-200px;
                background:#0c9;
                /*中間欄的位置擺正之後，右欄的位置也相應左移，通過相對定位的right恢復到正確位置*/
                position:relative;
                right:-200px;
            }
            .footer{
                height:50px;
                background: #666;
                text-align: center;
                
            }
        </style>
    </head>
    <body>
    <div class="header">header</div>
    <div class="main">
      <div class="middle">middle</div>
      <div class="left">left</div>
      <div class="right">right</div>
    </div>
    <div class="footer">footer</div>
    </body>
</html>

雙飛翼佈局

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title>雙飛翼佈局</title>
        <style type="text/css">
            .header {
                height: 100px;
                background: bisque;
            }

            .left {
                width: 200px;
                height: 300px;
                background: coral;
                float: left;
                margin-left: -100%;
                margin-right: -200px;
            }

            .center {
                background: palegreen;
                float: left;
                width: 100%;
                
            }
            .inside{
                margin-left: 200px;
                margin-right: 180px;
            }

            .right {
                width: 180px;
                height: 200px;
                background: darkorange;
                float: left;
                margin-left: -180px;
                
            }

            .footer {
                height: 200px;
                background: salmon;
                clear: both;
            }
        </style>
    </head>
    <body>
        <div class="header">header</div>
        <div class="main">
            <div class="center">
                <div class="inside">
                    中間自適應區域
                </div>
            </div>
            <div class="left">左邊固定區域</div>
            <div class="right">右邊固定區域</div>
        </div>
        <div class="footer">footer</div>
    </body>
</html> 
 
              
           
              
              
            
            相關推薦
			   
            
            
            
 

    

    
    CSS | 聖盃佈局、雙飛翼佈局 | 自適應三欄佈局
      聖盃佈局和雙飛翼佈局是前端工程師需要日常掌握的重要佈局方式。兩者的功能相同，都是為了實現一個兩側寬度固定，中間寬度自適應的三欄佈局
雖然兩者的實現方法略有差異，不過都遵循了以下要點：

1.兩側寬度固定，中間寬度自適應
2.中間部分在DOM結構上優先，以便先行渲染
3.允許三列中的任意一列成為最高列
4.只需 

  
 

    

    
    聖盃佈局、雙飛翼佈局、Flex佈局和絕對定位佈局的幾種經典佈局的具體實現示例
      
							
							
							題目要求：針對如下DOM結構，編寫CSS，實現三欄水平佈局，其中left、right分別位於左右兩側，left寬度為200px，right寬度為300px，main處在中間，寬度自適應。 
要求：允許增加額外的DOM節點，但不能修改現有節點順序。


  < 

  
 

    

    
    聖盃佈局、雙飛翼佈局的理解及對比
      
                一、聖盃佈局

1.聖盃佈局的DOM結構如下：

聖盃特點簡單記為：有頭、有尾、包三列，聖盃佈局中間是有container大容器包裹著左中右區域的。

<!--特點：有頭、有尾、包三列(有個container容器包裹：左、中、右三個區域)-->
    <h 

  
 

    

    
    聖盃佈局、雙飛翼佈局、flex佈局
      
                在面試中，我們經常會遇到CSS中兩端寬度固定大小，中間自適應問題

問題：

   編寫CSS，實現三欄水平佈局，其中left、right分別位於左右兩側，left寬度為100px，right寬度為200px，main處在中間，寬度自適應

解決方法：

聖盃佈局

頁面DO 

  
 

    

    
    聖盃模型和雙飛翼模型淺析（高度）
      
                
聖盃和雙飛翼都旨在實現三列的佈局，中間內容寬度自適應，兩邊內容寬度固定。
特別注意的是查找了許多資料發現竟然幾乎沒有資料提到過這兩個模型的高度問題，即使是網上給的程式碼也幾乎沒有實現高度自適應的問題，也許大家都覺得太簡單甚至不值一提，但是我卻為此糾結了很久，所以下面我也會提 

  
 

    

    
    圖解聖盃佈局與雙飛翼佈局--CSS佈局實戰一
       
 
  
  
 本質：均是兩側頂寬（寬度固定），中間自適應  適用：電商網頁pc移動端展示，比如淘寶、京東等電商網頁都有應用。  區別：只是中間自適應的處理方式不同。  聖盃佈局： 中間主要是直接撐滿，然後讓左右通過相對絕對定位（position）來浮動。  雙飛翼佈局：中間同樣充滿，在中間再放一層內部 

  
 

    

    
    css佈局：雙飛翼佈局與聖盃佈局
      
                
今天開班級會議，主要是講講畢業的事宜，其中一位同學說到他現在在專研一些新技術，但是我不建議他這麼做，畢竟基礎很重要程式設計主要學習的是思想
正題吧，前陣子朋友面試，有這麼一個要求：
就是兩邊定寬，中間自適應的三欄佈局

是不是感覺很簡單，但是我事後試了試，發現不是那麼簡單， 

  
 

    

    
    div  css  聖盃佈局與雙飛翼佈局
      
								
								            
							
							
							div  css  聖盃佈局



<html>
<head>
    <style>
        body{
            min-width:600 

  
 

    

    
    css-聖盃佈局和雙飛翼佈局
      
                1.聖盃佈局：（1）父元素中包含左中右三個盒子，並且讓他們分別左浮動。（2）將中間的盒子寬度設為100%，並且它在html中程式碼位置放在左右程式碼位置的上面（就是所說的第一個渲染）。（3）左右兩邊使用margin-left的負值，使他們與中間的盒子同行，（左邊：-100%， 

  
 

    

    
    Css之聖盃佈局和雙飛翼佈局
      
                
聖盃佈局和雙飛翼佈局是我再一次京東面試中聽到的詞彙,簡單來說,這種佈局其實都是我們CSS+div佈局的入門級,但是大家肯恩都不知道這個名詞,高大上的名詞一般都會顯示你的知識面及專業度
閒話不多說,原理講起來:
事實上，聖盃佈局其實和雙飛翼佈局是一回事。它們實現的都是三欄佈局 

  
 

    

    
    CSS聖盃佈局與雙飛翼佈局
      
                
原文連結：http://www.cnblogs.com/imwtr/p/4441741.html


按照我的理解，其實聖盃佈局跟雙飛翼佈局的實現，目的都是左右兩欄固定寬度，中間部分自適應。

但在這裡實現起來還是有一些區別的


【聖盃佈局】



在這裡，實現了左(20 

  
 

    

    
    CSS中的聖盃佈局，以及聖盃佈局與雙飛翼佈局的區別
      
                


            為了解決中間寬度自適應，左右列固定寬度，最早出現的是聖盃佈局，雙飛翼佈局是對聖盃佈局的改良，同樣這種
佈局的優勢在於在中間列中的文件可以優先渲染。

       1.什麼是聖盃佈局
          其實對於聖盃佈局，前面一部分與雙飛翼佈局完 

  
 

    

    
    經典三欄佈局之聖盃、雙飛翼、彈性佈局
      經典三欄佈局之聖盃、雙飛翼、彈性佈局
聖盃佈局和雙飛翼佈局是前端工程師需要掌握的佈局方式，兩者功能相同，都是為了實現兩側寬度固定，中間寬度自適應的佈局方式，此外，使用新增的flex佈局，可以使佈局更加簡單。
雙飛翼佈局和聖盃佈局雖然實現方式有所差異，但是基本上都遵循了以下幾點：


兩側寬度固定，中間寬度自適 

  
 

    

    
    css margin負邊距之列布局（列表、聖杯、雙飛翼）
      door   ont   oct   class   containe   resp   固定寬度   單元   自適應   技術服務於應用，技術來源於應用。
應用1：當接到設計師給的設計圖時（如下圖），發現每列左右和上下文保持一致，頓時整個心情就不好了。因為要兼顧響應式，即沒辦法保證每個列表單元的具體位置， 

  
 

    

    
    佈局：聖盃佈局和雙飛翼佈局
       
  
  
 聖盃佈局和雙飛翼佈局都是為了實現兩邊固定，中間自適應的三列的佈局，他的中間欄優先渲染。 聖盃佈局與雙飛翼佈局前面幾步相同 1.寫三個div，中間的那個div放在第一個//優先渲染 2.給左中右設定浮動，分別設定高度，寬度，顏色 3.左邊模組讓它margin-left:-100%,右邊模組ma 

  
 

    

    
    聖盃佈局和雙飛翼佈局的理解和區別
       
  
  
 連結 
 聖盃佈局和雙飛翼佈局基本上是一致的，都是兩邊固定寬度，中間自適應的三欄佈局，其中，中間欄放到文件流前面，保證先行渲染。解決方案大體相同，都是三欄全部float:left浮動，區別在於解決中間欄div的內容不被遮擋上，聖盃佈局是中間欄在新增相對定位，並配合left和right屬性，效 

  
 

    

    
    關於聖盃佈局和雙飛翼佈局
      
								
								            
						
                
聖盃佈局和雙飛翼佈局講的都是三欄佈局，其中兩欄固定，中間自適應，兩者顯示的效果是一致的；另外由於沒有使用絕對定位position:absolute，所以可以避免發生當頁面內容比較多的時候用絕對定位導致 

  
 

    

    
    經典的三欄佈局：聖盃佈局，雙飛翼佈局，flex佈局
      
							
							
							
  需求： 
  兩邊欄固定寬度，中間寬度自適應，一般左邊欄為導航，右邊欄為廣告，中間欄為主要內容的展示，div塊上中間欄放在第一位，重要的東西放在文件流前面可以優先渲染。


聖盃佈局和雙飛翼佈局的共同特點都是利用float+margin的負值來實現並列的結 

  
 

    

    
    聖盃佈局和雙飛翼佈局
      
								
								            
							
							
							聖盃佈局

聖盃佈局就是三欄佈局，其中左右兩欄固定寬度，中間部分自適應 
主要步驟：


在html中，中間的塊在最前面，後面緊跟左邊的塊和右邊的塊
三者均設定float:left，中間塊設定width 

  
 

    

    
    聖盃佈局【雙飛翼佈局】的幾種實現
      
								
								            
							
							
							
  聖盃佈局【雙飛翼佈局】：兩邊定寬，中間寬度自適應；且優先渲染中間主題內容部分。


一、負邊距法

DOM結構： 
 由於需要優先渲染主題內容部分，因此在DOM結構中需要將其寫在左右側邊欄之前。