兩列布局（左邊定寬，右邊自适應）

這種布局，我的思路是考慮兩個方面：兩列 和 定寬

兩列 意味着是水準布局，也就是元素在同一行，先解決這點。

定寬 意味着左邊寬度固定，右邊寬度随着視窗大小而變。

實作可參考連結 codepen.io/youngmaxer/…

一、inline-block + calc

思路

兩列：使用

inline-block

使兩個

div

處于同一行中

定寬：左邊設定固定寬度即可，右邊根據計算來确定寬度以實作自适應

實作

<div class="wrapper">
  <div class="left">
    左邊
  </div>
  <div class="right">
    右邊
  </div>
</div>
複制代碼
           

.left {
    width: ;
}
.right {
    width: calc(100% - 100px);
    margin-left: ;
}
複制代碼
           

二、float + calc

思路

兩列：使用

float

使兩個

div

處于同一行中

定寬：左邊設定固定寬度即可，右邊根據計算來确定寬度以實作自适應

實作

.left {
    width: ;
    float: left;
}
.right {
    float: left;
    width: calc(100% - 120px);
    margin-left: ;
}
複制代碼
           

三、position + calc

思路

兩列：使用

absolute

使兩個

div

處于同一行中

定寬：左邊設定固定寬度即可，右邊根據計算來确定寬度以實作自适應

實作

.parent {
    position: relative;
    .left {
        position: absolute;
        left: 0;
        width: 100px;
    }
    .right {
        position: absolute;
        left: 120px;
        width: calc(100% - 120px);
    }
}
複制代碼
           

四、float + BFC

思路

兩列：使用

float

和

overflow: hidden

利用 BFC 的特性使元素在一行上

定寬：左邊設定固定寬度即可，右邊由于 BFC 寬度會自适應

實作

.left {
    float: left;
    width: ;
    margin-right: ;
}
.right {
    overflow: hidden;
}
複制代碼
           

五、flex

思路

兩列：預設 flex 布局元素在水準方向上

定寬：左邊設定固定寬度即可，右邊利用

flex: 1

會将剩餘空間占據實作寬度自适應。

實作

.parent {
    display: flex;
    .left {
        width: 100px;
        margin-right: 20px;
    }
    .right {
        flex: 1;
    }
}
複制代碼
           

六、float + margin

思路

兩列：使用

float

，由于脫離文檔流，是以元素在同一行上

定寬：左邊設定固定寬度即可，右邊通過

margin-left

從形式上隔離二者的重疊

實作

.left {
    float: left;
    width: ;
}
.right {
    margin-left: ;
}
複制代碼
           

參考

• 《兩列自适應布局方案整理》 segmentfault.com/a/119000000…
• 《頁面布局：兩列布局》 www.jianshu.com/p/d0388e8f4…

轉載于:https://juejin.im/post/5bbcc6e8f265da0a9c789248