三欄布局總結

UCloud 發布于2019-08-29 12:24 / 1156人閱讀

摘要：前言所謂三欄布局，即使指兩邊定寬，中間寬度自使用的布局方式，在過去，一直是一個麻煩的問題，為了解決這個問題，有各種奇技淫巧，最出名的非圣杯布局和雙飛翼布局莫屬了，但是自發展以來，特別是布局的支持度越來越好，這個問題也越來越淡化了正文浮動布局

前言

所謂三欄布局，即使指兩邊定寬，中間寬度自使用的布局方式，在過去，一直是一個麻煩的問題，
為了解決這個問題，有各種奇技淫巧，最出名的非圣杯布局和雙飛翼布局莫屬了，但是自CSS3發展以來，
特別是flexbox布局的支持度越來越好，這個問題也越來越淡化了

正文

浮動布局

HTML如下：

Left
Right
Main

CSS如下：

        body, html {
     height: 100%;
     padding: 0;
     margin: 0;
   }
   .left{
     background: red;
     width:100px;
     float: left;
     height:100%;
   }
   .main{
     background:blue;
     height:100%;
     margin-left:100px;
     margin-right:200px;
   }
   .right{
     background:red;
     width:200px;
     float: right;
     height:100%;
   }

浮動布局代碼比較簡潔，同時也易于理解，但是浮動往往會帶來塌陷等問題，而且浮動渲染計算量

較大，在移動端性能表現較差。另一個需要注意的是，main即中間部分需要放在最后，如果是left-main-right的方式

納悶main部分將會占滿剩余空間，right也就被擠到下一行了，相反，如果我們設置了right和left，在設置main
main部分將會流入left和right的下面，從而達到我們的目的

絕對定位

HTML如下：

left
main
right

CSS如下：

           body, html {
  height: 100%;
  padding: 0;
  margin: 0;
}

.left, .right {
  position: absolute;
  top: 0;
  background: red;
  height: 100%;
}

.left {
  left: 0;
  width: 100px;
}

.right {
  right: 0;
  width: 200px;
}

.main {
  margin-left: 100px;
  margin-right: 200px;
  height: 100%;
  background: blue;
}

該方法有個明顯的缺點，就是如果中間欄含有最小寬度限制，或是含有寬度的內部元素，當瀏覽器寬度小到一定程度，會發生層重疊的情況

圣杯布局

圣杯布局巧妙的利用負margin來使元素上移，再結合相對定位，移到外層容器的padding位置，從而達到目標

HTML如下：

main
left
right

CSS如下：

        body, html {
     height: 100%;
     padding: 0;
     margin: 0;
   }
   body{
     padding-left:100px;
     padding-right:200px;
   }
   .left{
     background: red;
     width:100px;
     float: left;
     margin-left:-100%;/*-100%：1、導致left超出body內容(此時body內容寬度只有100%-200-100）移到上層2：margin是根據父元素的寬度的，所以-100%就到上層body內容的最前*/
     position: relative;
     left:-100px;/*-100px為了超出body內容左邊,到達視窗最左*/
     height:100%;
   }
   .main{
     background: blue;
     width:100%;
     height:100%;
     float: left;
   }
   .right{
     background:red;
     width:200px;
     height:100%;
     float: left;
     margin-left:-200px;/*-200px為了超出body內容到達上一層body內容最后*/
     position: relative;
     right:-200px;/*-200px是為了向右偏移回到視窗最右*/
   }
   .container{
     width:500px;
     height:200px;
   }

問題：如果外層內容盒寬度過小，不足以容納.left的寬度，那么.left依然會被保留在下層

雙飛翼布局

雙飛翼布局與圣杯布局原理類似，只不過是取消了外層的padding，從而使內容盒等于padding-box從而避免了.left上移后需要設置left值移動到padding

HTML如下：


  
    main
  


  left


  right

CSS如下：

          body, html {
    height: 100%;
    padding: 0;
    margin: 0;
  }
  body{
    /*padding-left:100px;*/
    /*padding-right:200px;*/
  }
  .left{
    background: red;
    width:100px;
    float: left;
    margin-left:-100%;/*-100% 1：是為了超出body內容(此時body內容為100%)最左 2：到達body上層內容最左也就是視窗最左
    /*position: relative;*/
    /*left:-100px;*/
    height:100%;
  }
  .main{
    background: blue;
    width:100%;
    height:100%;
    float: left;
  }
  .right{
    background:red;
    width:200px;
    height:100%;
    float: left;
    margin-left:-200px;/*-200px 1：是為了超出body內容(此時body內容為100%)最左 2：到達body上層內容最右也就是視窗最右
    /*position: relative;*/
    /*right:-200px;*/
  }
  .inner{
    margin-left:100px;
    margin-right:200px;
  }

與圣杯布局不同的地方已用注釋指出，而雙飛翼問題與圣杯一樣

flexbox布局

flexbox布局可謂是最為理想的解決方案了，一方面，代碼簡潔易懂，另一方面，當寬度太小時，也可以通過伸縮，避免重疊

HTML如下：

main
left
right

CSS如下：

body,html{
   height:100%;
   padding: 0;
   margin:0;
 }
 body{
   display: flex;
   flex-flow:row nowrap;
 }
 .left{
   background: red;
   width:100px;
   height:100%;
   order:0;
 }
 .main{
   background-color: blue;
   flex:1;
   height:100%;
   order:1;
 }
 .right{
   background: red;
   width:200px;
   height:100%;
   order:2;
 }

GPU云服務器云服務器三欄布局 html5 三欄布局年終總結網絡總結

文章版權歸作者所有，未經允許請勿轉載,若此文章存在違規行為，您可以聯系管理員刪除。

轉載請注明本文地址：http://specialneedsforspecialkids.com/yun/111868.html

實現三欄布局的幾種方法

摘要：前言三欄布局，顧名思義就是兩邊固定，中間自適應。三欄布局在實際的開發十分常見，比如淘寶網的首頁，就是個典型的三欄布局即左邊商品導航和右邊導航固定寬度，中間的主要內容隨瀏覽器寬度自適應。但網格布局的兼容性不好。前言三欄布局，顧名思義就是兩邊固定，中間自適應。三欄布局在實際的開發十分常見，比如淘寶網的首頁，就是個典型的三欄布局：即左邊商品導航和右邊導航固定寬度，中間的主要內容隨瀏覽器寬...

golden_hamster 2019-08-02 11:55 評論0 收藏0
實現三欄布局的幾種方法

摘要：前言三欄布局，顧名思義就是兩邊固定，中間自適應。三欄布局在實際的開發十分常見，比如淘寶網的首頁，就是個典型的三欄布局即左邊商品導航和右邊導航固定寬度，中間的主要內容隨瀏覽器寬度自適應。但網格布局的兼容性不好。前言三欄布局，顧名思義就是兩邊固定，中間自適應。三欄布局在實際的開發十分常見，比如淘寶網的首頁，就是個典型的三欄布局：即左邊商品導航和右邊導航固定寬度，中間的主要內容隨瀏覽器寬...

IamDLY 2019-08-29 17:12 評論0 收藏0
實現三欄布局的幾種方法

摘要：前言三欄布局，顧名思義就是兩邊固定，中間自適應。三欄布局在實際的開發十分常見，比如淘寶網的首頁，就是個典型的三欄布局即左邊商品導航和右邊導航固定寬度，中間的主要內容隨瀏覽器寬度自適應。但網格布局的兼容性不好。前言三欄布局，顧名思義就是兩邊固定，中間自適應。三欄布局在實際的開發十分常見，比如淘寶網的首頁，就是個典型的三欄布局：即左邊商品導航和右邊導航固定寬度，中間的主要內容隨瀏覽器寬...

Hegel_Gu 2019-08-23 12:52 評論0 收藏0
CSS三欄布局的經典實現方法

摘要：經典方法三欄布局的方法有很多種，其中最經典的方法莫過于圣杯布局和雙飛翼布局。而雙飛翼布局方法無需相對位置屬性，而是采用為中欄內容創建的方式，通過來實現布局。文章第二部分闡述了流行的圣杯布局方法和雙飛翼布局方法的細節和異同。三欄是CSS布局中常見的一種布局模式，顧名思義，就是將網頁內容以三列的形式呈現。通常，三欄布局中的左欄和右欄是固定寬度的，中欄隨著窗口寬度的變化而變化。本文探討欄三...

neuSnail 2019-08-30 15:56 評論0 收藏0
CSS三欄布局的經典實現方法

摘要：經典方法三欄布局的方法有很多種，其中最經典的方法莫過于圣杯布局和雙飛翼布局。而雙飛翼布局方法無需相對位置屬性，而是采用為中欄內容創建的方式，通過來實現布局。文章第二部分闡述了流行的圣杯布局方法和雙飛翼布局方法的細節和異同。三欄是CSS布局中常見的一種布局模式，顧名思義，就是將網頁內容以三列的形式呈現。通常，三欄布局中的左欄和右欄是固定寬度的，中欄隨著窗口寬度的變化而變化。本文探討欄三...

Forelax 2019-08-02 14:31 評論0 收藏0