多列布局方案整理

Taste 發布于2019-08-01 15:06 / 2007人閱讀

摘要：了解中屬性的值及其特性，透徹分析問題和需求才可以選擇和設計最適合的布局解決方案。多列布局在網頁中非常常見例如兩列布局，多列布局可以是兩列定寬，一列自適應，或者多列不定寬一列自適應還有等分布局等。

了解 CSS 中屬性的值及其特性，透徹分析問題和需求才可以選擇和設計最適合的布局解決方案。

多列布局在網頁中非常常見（例如兩列布局），多列布局可以是兩列定寬，一列自適應，或者多列不定寬一列自適應還有等分布局等。

定寬-自適應

有如下布局


  
    left
  
  
    right
    right

float+margin

  .left {
    float: left;
    width: 100px;
  }
  .right {
    margin-left: 100px
    /*間距可再加入 margin-left */
  }

優點：容易理解
缺點：IE6中會有3像素的BUG，解決方法可以在.left 加入 margin-left:-3px。
因為left是浮動元素，right是沒有浮動的，如果right內容中有清楚浮動就會產生bug。

改進：float + margin + (fix)


  
    left
  
    /*外層在包裹一個容器*/
  
    
      right
      right

兼容性很好，適用于多版本瀏覽器（包括 IE6）但是多了層right-fix的結構。但left不可選擇，被right-fix蓋住。需要設置left的 position: relative;來提高層級。

float+overflow

 .left{ 
       float: left;
       width: 100px;
       margin-right: 20px;
  }
  .right{ overflow: hidden; //觸發BFC }

overflow:hidden使得div產生了BFC 模式（Block Formatting Context）塊級格式化文本，根據BFC的布局規則之一，div那個產生的BFC區域不會與左邊浮動的元素所重疊。具體什么是BFC可以看看這篇文章

table

 .parent {
    display: table;
    width: 100%;
    table-layout: fixed;
  }
  .left {
    display: table-cell;
    width: 100px;
  }
  .right {
    display: table-cell;
    /*寬度為剩余寬度*/
  }

table 的顯示特性為每列的單元格寬度合一定等與表格寬度。 table-layout: fixed; 可加速渲染，也是設定布局優先。

table-cell 中不可以設置 margin 但是可以通過 padding 來設置間距。

flex

 .parent{ 
      display: flex ; 
  }
 .left { 
       width: 100px;
       margin-right: 20px;
  }
  .right{
        /*等價于flex:1 1 0; 增長因子和收縮因子都為1，
         基礎寬度為0,那么剩余寬度都分配給right*/
        flex: 1 ; 
    }

flex-item 默認為內容寬度。
缺點： CSS3 兼容性。根據內容判斷，性能會有問題，做小范圍布局，不適合大范圍布局。

不定寬-自適應

float + overflow

  .left{ 
       float: left;
       width: 200px;
       margin-right: 20px;
  }
  .right{ overflow: hidden; //觸發BFC }

table

 .parent{ 
      display:table; 
      width: 100%;
  }
 .left, .right { 
       display: table-cell;
  }
  .left{ 
       width:0.1%;  //寫的夠小就行，不寫1px的原因是IE8會有問題
       padding-right:20px; 
   }
  .left p{ width : 200px;}  //用內部元素撐開，寬度可以不定

flex

.parent{display:flex;}
.left{margin-right:20px;}
.right{flex:1;}

三列不定寬 + 自適應與兩列的做法一樣

等分布局

每一列的寬度和間距均相等。
有如下HTML結構

float

 .parent{
    margin-left ：-20px; //為父元素增加20px寬度
    }
 .column{
       float : left;
       width: 25%;
       padding-left : 20px;
       box-sizing : border-box;
      }

缺點：結構和樣式稍微有點耦合性

table

 .parent-fix{  margin-left ：-20px; //為父元素增加20px寬度 }
 .parent{ 
      display : table;
      width : 100%;
      table-layout : fixed;
  }     
  .column{
       float : left;
       width: 25%;
       padding-left : 20px;
       box-sizing : border-box;
  }

fix

 .parent{ 
      display : flex;
  }     
  .column{
      flex: 1;
  }
  .column+.column{  margin-left: 20px;  } //選擇2，3，4

等高需求 table

上面自適應的table布局就具有登高的布局

flex

如上面自適應的例子，flex 天然等高

float

 .parent{  overflow : hidden; }
 .left, .right{
       padding-bottom : 9999px;
       margin-bottom : -9999px;
  }

優點是兼容性比較好
缺點是偽等高不是正真意義上的登高

云服務器 GPU云服務器大數據收集整理方案數據整理及存儲方案 idc機房布局方案多列數據

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

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

多列布局方案整理

摘要：了解中屬性的值及其特性，透徹分析問題和需求才可以選擇和設計最適合的布局解決方案。多列布局在網頁中非常常見例如兩列布局，多列布局可以是兩列定寬，一列自適應，或者多列不定寬一列自適應還有等分布局等。了解 CSS 中屬性的值及其特性，透徹分析問題和需求才可以選擇和設計最適合的布局解決方案。多列布局在網頁中非常常見（例如兩列布局），多列布局可以是兩列定寬，一列自適應，或者多列不定寬一列...

Euphoria 2019-08-30 12:48 評論0 收藏0
【整理】CSS布局方案

摘要：無名布局自己瞎搞的，簡單的絕對定位即可解決問題，為啥還要搞什么圣杯和雙飛翼如果你覺得此文對你有一定的幫助，可以點擊下方的喜歡收藏備用 showImg(https://segmentfault.com/img/remote/1460000010989115); 我們在日常開發中經常遇到布局問題，下面羅列幾種常用的css布局方案話不多說，上代碼！以下所有demo的源碼github：htt...

Winer 2019-08-29 13:20 評論0 收藏0
前端面試重點之——多列布局

摘要：重點以需求為例說明。三左邊不定寬，右邊自適應布局需求左側不定寬，右側自適應，間距。五等寬布局解決方案需求多列等寬，并保留間距。在頁面開發中，當我們拿到設計師給出的UI圖后，首先考慮的就是布局問題，而多列布局會是我們碰到最多的布局問題，個人就匯總了開發中常見多列布局問題的解決方法。按列數可以分為兩列布局，三列布局，多列布局，其中布局方法中的原理都有類似之處。目錄一、定寬+...

lei___ 2019-08-02 15:33 評論0 收藏0
前端面試重點之——多列布局

摘要：重點以需求為例說明。三左邊不定寬，右邊自適應布局需求左側不定寬，右側自適應，間距。五等寬布局解決方案需求多列等寬，并保留間距。在頁面開發中，當我們拿到設計師給出的UI圖后，首先考慮的就是布局問題，而多列布局會是我們碰到最多的布局問題，個人就匯總了開發中常見多列布局問題的解決方法。按列數可以分為兩列布局，三列布局，多列布局，其中布局方法中的原理都有類似之處。目錄一、定寬+...

superPershing 2019-08-23 18:40 評論0 收藏0
前端面試重點之——多列布局

摘要：重點以需求為例說明。三左邊不定寬，右邊自適應布局需求左側不定寬，右側自適應，間距。五等寬布局解決方案需求多列等寬，并保留間距。在頁面開發中，當我們拿到設計師給出的UI圖后，首先考慮的就是布局問題，而多列布局會是我們碰到最多的布局問題，個人就匯總了開發中常見多列布局問題的解決方法。按列數可以分為兩列布局，三列布局，多列布局，其中布局方法中的原理都有類似之處。目錄一、定寬+...

makeFoxPlay 2019-08-30 11:25 評論0 收藏0