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

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

兩列 意味著是水平佈局，也就是元素在同一行，先解決這點。

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

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

一、inline-block + calc

思路

兩列：使用 inline-block 使兩個 div 處於同一行中

定寬：左邊設定固定寬度即可，右邊根據計算來確定寬度以實現自適應

實現

<div class="wrapper">
  <div class="left">
    左邊
  </div>
  <div class="right">
    右邊
  </div>
</div>
複製程式碼

.left {
    width: 100px;
}
.right {
    width: calc(100% - 100px);
    margin-left: 20px;
}
複製程式碼

二、float + calc

思路

兩列：使用 float 使兩個 div 處於同一行中

定寬：左邊設定固定寬度即可，右邊根據計算來確定寬度以實現自適應

實現

.left {
    width: 100px;
    float: left;
}
.right {
    float: left;
    width: calc(100% - 120px);
    margin-left: 20px;
}
複製程式碼

三、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: 100px;
    margin-right: 20px;
}
.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: 100px;
}
.right {
    margin-left: 120px;
}
複製程式碼

參考

• 《兩列自適應佈局方案整理》 segmentfault.com/a/119000000…

• 《頁面佈局：兩列布局》 www.jianshu.com/p/d0388e8f4…