實現左側固定寬度, 右側自適應的兩欄佈局常見方法

zzzmj發表於2019-02-26

兩欄佈局方案

實現左側固定, 右側自適應的佈局方案, 常見的幾種, 寫了一個各個方案實現效果的Demo, 可以通過這裡檢視: 預覽

首先統一html結構

<div class="container">
    <div class="left">
        <p>這是左邊的盒子</p>
    </div>
    <div class="right">
        <p>這是右邊的盒子</p>
    </div>
</div>
複製程式碼

然後統一樣式, 左側固定寬度

.container {
    padding: 10px;
    border: 1px dashed #dedede;
}

.left {
    width: 120px;
    border: 2px solid #2DB3E4;
}

.right {
    border: 2px solid #F37EC1;
}
複製程式碼

1. 雙float方案

利用CSS的calc()函式來計算右側寬度值, 需要清除父容器的浮動

設定box-sizing: border-box;是為了方便計算

.container::after {
    content: "";
    display: block;
    clear: both;
}

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

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

2. float + margin-left方案

block的元素盒子的寬度具有填滿父容器，並隨著父容器的寬度自適應的流動特性。

並且 block元素和浮動元素並排時, block元素會忽視浮動元素

因此給左側盒子浮動, 右側設定margin-left保持距離即可

.container::after {
    content: "";
    display: block;
    clear: both;
}

.left {
    box-sizing: border-box;
    float: left;
}

.right {
    margin-left: 120px;
}
複製程式碼

3. absolute + margin-left

與方案2原理大致相同, absolute也是會脫離文件流

不用清除浮動, 但也帶來了新的問題

  1. 父容器需要改變position
  2. 如果左側盒子比右側盒子高度, 那麼左側盒子會超出父容器高度
.left {
    box-sizing: border-box;
    position: absolute;
}

.right {
    margin-left: 120px;
}
複製程式碼

4. float + BFC 方法

這種方法不用計算寬度, 原理是BFC可以阻止元素被浮動元素覆蓋

.container::after {
    content: "";
    display: block;
    clear: both;
}

.left {
    float: left;
}

.right {
    margin-left: 0;
    overflow: auto;
}
複製程式碼

父容器需要清除浮動, 右側盒子設定了overflow: auto;形成了BFC

5. flex方案

flex可以說是最好的方案了

直接給右側盒子設定flex: 1, 即可自動填滿寬度

.container {
    display: flex;
}

.right {
    flex: 1
}
複製程式碼

相關文章