七種實現左側固定，右側自適應兩欄佈局的方法

胡不歸發表於2017-08-16

總結一下左邊固定，右邊自適應的兩欄佈局的七種方法。其中有老生常談的float方法,BFC方法，也有CSS3的flex佈局與grid佈局。並非所有的佈局都會在開發中使用，但是其中也會涉及一些知識點。關於最終的效果，可以檢視這裡

常用的寬度自適應的方法通常是利用了block水平的元素寬度能隨父容器調節的流動特性。另外一種思路是利用CSS中的calc()方法來動態設定寬度。還有一種思路是，利用CSS中的新型佈局flex layout與grid layout。

首先建立基本的HTML佈局和最基本的樣式。

<div class="wrapper" id="wrapper">
  <div class="left">
    左邊固定寬度，高度不固定 </br> </br></br></br>高度有可能會很小，也可能很大。
  </div>
  <div class="right">
    這裡的內容可能比左側高，也可能比左側低。寬度需要自適應。</br>
    基本的樣式是，兩個div相距20px, 左側div寬 120px
  </div>
</div>

基本的樣式是，兩個盒子相距20px, 左側盒子寬 120px，右側盒子寬度自適應。基本的CSS樣式如下:

.wrapper {
    padding: 15px 20px;
    border: 1px dashed #ff6c60;
}
.left {
    width: 120px;
    border: 5px solid #ddd;
}
.right {
    margin-left: 20px;
    border: 5px solid #ddd;
}

下面的程式碼都是基於這套基本程式碼做覆蓋，通過給容器新增不同的類來實現效果。

雙inline-block方案

.wrapper-inline-block {
    box-sizing: content-box;
    font-size: 0;    // 消除空格的影響
}

.wrapper-inline-block .left,
.wrapper-inline-block .right {
    display: inline-block;
    vertical-align: top;    // 頂端對齊
    font-size: 14px;
    box-sizing: border-box;
}

.wrapper-inline-block .right {
    width: calc(100% - 140px);
}

這種方法是通過width: calc(100% - 140px)來動態計算右側盒子的寬度。需要知道右側盒子距離左邊的距離，以及左側盒子具體的寬度(content+padding+border)，以此計算父容器寬度的100%需要減去的數值。同時，還需要知道右側盒子的寬度是否包含border的寬度。
在這裡，為了簡單的計算右側盒子準確的寬度，設定了子元素的box-sizing:border-box;以及父元素的box-sizing: content-box;。
同時，作為兩個inline-block的盒子，必須設定vertical-align來使其頂端對齊。
另外，為了準確地應用計算出來的寬度，需要消除div之間的空格，需要通過設定父容器的font-size: 0;,或者用註釋消除html中的空格等方法。
缺點:

  • 需要知道左側盒子的寬度，兩個盒子的距離，還要設定各個元素的box-sizing

  • 需要消除空格字元的影響

  • 需要設定vertical-align: top滿足頂端對齊。

雙float方案

.wrapper-double-float {
    overflow: auto;        // 清除浮動
    box-sizing: content-box;
}

.wrapper-double-float .left,
.wrapper-double-float .right {
    float: left;
    box-sizing: border-box;
}

.wrapper-double-float .right {
    width: calc(100% - 140px);
}

本方案和雙float方案原理相同，都是通過動態計算寬度來實現自適應。但是，由於浮動的block元素在有空間的情況下會依次緊貼，排列在一行，所以無需設定display: inline-block;，自然也就少了頂端對齊，空格字元佔空間等問題。

A floated box is shifted to the left or right until its outer edge touches the containing block edge or the outer edge of another float.

不過由於應用了浮動，父元素需要清除浮動。
缺點:

  • 需要知道左側盒子的寬度，兩個盒子的距離，還要設定各個元素的box-sizing。

  • 父元素需要清除浮動。

float+margin-left方案

.wrapper-float {
    overflow: hidden;        // 清除浮動
}

.wrapper-float .left {
    float: left;
}

.wrapper-float .right {
    margin-left: 150px;
}

上面兩種方案都是利用了CSS的calc()函式來計算寬度值。下面兩種方案則是利用了block級別的元素盒子的寬度具有填滿父容器，並隨著父容器的寬度自適應的流動特性。
但是block級別的元素都是獨佔一行的，所以要想辦法讓兩個block排列到一起。
我們知道，block級別的元素會認為浮動的元素不存在，但是inline級別的元素能識別到浮動的元素。這樣，block級別的元素就可以和浮動的元素同處一行了。
為了讓右側盒子和左側盒子保持距離，需要為左側盒子留出足夠的距離。這個距離的大小為左側盒子的寬度以及兩個盒子之間的距離之和。然後將該值設定為右側盒子的margin-left。
缺點：

  • 需要清除浮動

  • 需要計算右側盒子的margin-left

使用absolute+margin-left方法

另外一種讓兩個block排列到一起的方法是對左側盒子使用position: absolute的絕對定位。這樣，右側盒子也能無視掉它。

.wrapper-absolute .left {
    position: absolute;
}

.wrapper-absolute .right {
    margin-left: 150px;
}

缺點:

  • 使用了絕對定位，若是用在某個div中，需要更改父容器的position。

  • 沒有清除浮動的方法，若左側盒子高於右側盒子，就會超出父容器的高度。因此只能通過設定父容器的min-height來放置這種情況。

使用float+BFC方法

上面的方法都需要通過左側盒子的寬度，計算某個值，下面三種方法都是不需要計算的。只需要設定兩個盒子之間的間隔。

.wrapper-float-bfc {
    overflow: auto;
}

.wrapper-float-bfc .left {
    float: left;
    margin-right: 20px;
}

.wrapper-float-bfc .right {
    margin-left: 0;
    overflow: auto;
}

這個方案同樣是利用了左側浮動，但是右側盒子通過overflow: auto;形成了BFC，因此右側盒子不會與浮動的元素重疊。

an element in the normal flow that establishes a new block formatting context (such as an element with `overflow` other than `visible`) must not overlap the margin box of any floats in the same block formatting context as the element itself。

這種情況下，只需要為左側的浮動盒子設定margin-right，就可以實現兩個盒子的距離了。而右側盒子是block級別的，所以寬度能實現自適應。
缺點:

  • 父元素需要清除浮動

flex方案

.wrapper-flex {
    display: flex;
    align-items: flex-start;
}

.wrapper-flex .left {
    flex: 0 0 auto;
}

.wrapper-flex .right {
    flex: 1 1 auto;
}

flex可以說是最好的方案了，程式碼少，使用簡單。有朝一日，大家都改用現代瀏覽器，就可以使用了。
需要注意的是，flex容器的一個預設屬性值:align-items: stretch;。這個屬性導致了列等高的效果。
為了讓兩個盒子高度自動，需要設定: align-items: flex-start;

grid方案

又一個新型的佈局方式。可以滿足需求，但這並不是它發揮用處的真正地方。

.wrapper-grid {
    display: grid;
    grid-template-columns: 120px 1fr;
    align-items: start;
}

.wrapper-grid .left,
.wrapper-grid .right {
    box-sizing: border-box;
}

.wrapper-grid .left {
    grid-column: 1;
}

.wrapper-grid .right {
    grid-column: 2;
}

注意:

  • grid佈局也有列等高的預設效果。需要設定: align-items: start;。

  • grid佈局還有一個值得注意的小地方和flex不同:在使用margin-left的時候，grid佈局預設是box-sizing設定的盒寬度之間的位置。而flex則是使用兩個div的border或者padding外側之間的距離。

極限情況

最後可以再看一下在父容器極限小的情況下，不同方案的表現。主要分成四種情況：

  • 動態計算寬度的情況

    兩種方案: 雙inline-block方案和雙float方案。寬度極限小時，右側的div寬度會非常小，由於遵循流動佈局，所以右側div會移動到下一行。

  • 動態計算右側margin-left的情況

    兩種方案: float+margin-left方案和absolute+margin-left方案。寬度極限小時，由於右側的div忽略了文件流中左側div的存在，所以其依舊會存在於這一行，並被隱藏。

  • float+BFC方案的情況

    這種情況下，由於BFC與float的特殊關係，右側div在寬度減小到最小後，也會掉落到下一行。

  • flex和grid的情況

    這種情況下，預設兩種佈局方式都不會放不下的div移動到下一行。不過 flex佈局可以通過 flex-flow: wrap;來設定多餘的div移動到下一行。 grid佈局暫不支援。

如果感覺寫的有問題，懇請指出。

本文首發於我的部落格

相關文章