CSS實戰筆記(十一) 自適應三欄佈局

自適應三欄佈局是常見的佈局之一，一般實現爲兩邊定寬而中間自適應

1、通過 Float 實現

<div class="wrap">
    <div class="left">
        <p>Hello World</p>
    </div>
    <div class="right">
        <p>Thank You</p>
    </div>
    <!-- center 必須寫在最後 -->
    <div class="center">
        <p>Say Hello To Tomorrow</p>
        <p>Say Goodbye To Yesterday</p>
    </div>
</div>

.wrap {
    /* BFC */
    overflow: hidden;
    zoom: 1; /* compatible with IE6 */
}
.left {
    background-color: lightskyblue;
    /* float + margin*/
    float: left;
    margin-right: 20px;
}
.right {
    background-color: deepskyblue;
    /* float + margin*/
    float: right;
    margin-left: 20px;
}
.center {
    background-color: skyblue;
    /* BFC */
    overflow: hidden;
    zoom: 1; /* compatible with IE6 */
}

2、通過 Flex 實現

<div class="wrap">
    <div class="left">
        <p>Hello World</p>
    </div>
    <div class="center">
        <p>Say Hello To Tomorrow</p>
        <p>Say Goodbye To Yesterday</p>
    </div>
    <div class="right">
        <p>Thank You</p>
    </div>
</div>

.wrap {
    /* flex container */
    display: flex;
}
.left {
    background-color: lightskyblue;
    /* flex item */
    flex-grow: 0;
    /* margin */
    margin-right: 20px;
}
.center {
    background-color: skyblue;
    /* flex item */
    flex-grow: 1;
}
.right {
    background-color: deepskyblue;
    /* flex item */
    flex-grow: 0;
    /* margin */
    margin-left: 20px;
}

3、通過 Grid 實現

<div class="wrap">
    <div class="left">
        <p>Hello World</p>
    </div>
    <div class="center">
        <p>Say Hello To Tomorrow</p>
        <p>Say Goodbye To Yesterday</p>
    </div>
    <div class="right">
        <p>Thank You</p>
    </div>
</div>

.wrap {
    /* grid container */
    display: grid;
    grid-template-columns: auto 1fr auto;
    grid-column-gap: 20px;
}
.left {
    background-color: lightskyblue;
}
.center {
    background-color: skyblue;
}
.right {
    background-color: deepskyblue;
}

4、聖盃佈局和雙飛翼佈局

聖盃佈局和雙飛翼佈局都是典型的自適應三欄佈局，而且它們要求中間欄必須放在 DOM 結構的最前面優先渲染

（1）聖盃佈局

<div class="wrapper">
    <!-- center 必須寫在最前 -->
    <div class="center">
        <p>Say Hello To Tomorrow</p>
        <p>Say Goodbye To Yesterday</p>
    </div>
    <div class="left">
        <p>Hello World</p>
    </div>
    <div class="right">
        <p>Thank You</p>
    </div>
</div>

* {
    margin: 0;
    padding: 0;
}
.wrapper {
    /* 4、給容器設置內邊距，爲左右兩欄預留位置 */
    padding-left: 220px;
    padding-right: 220px; 
}
.center {
    background-color: skyblue;
    /* 1、三欄同時設置左浮動，此時它們處於同一行 */
    float: left;
    /* 2、中間欄設置寬度自適應，此時左右兩欄被擠到下一行 */
    width: 100%;
}
.left {
    width: 200px;
    background-color: lightskyblue;
    /* 1、三欄同時設置左浮動，此時它們處於同一行 */
    float: left;
    /* 3、左右兩欄設置負外邊距，使它們回到同一行 */
    margin-left: -100%;
    /* 5、左右兩欄設置相對定位，使其移到左右兩邊 */
    position: relative;
    left: -220px;
}
.right {
    width: 200px;
    background-color: deepskyblue;
    /* 1、三欄同時設置左浮動，此時它們處於同一行 */
    float: left;
    /* 3、左右兩欄設置負外邊距，使它們回到同一行 */
    margin-left: -200px;
    /* 5、左右兩欄設置相對定位，使其移到左右兩邊 */
    position: relative;
    right: -220px;
}

（2）雙飛翼佈局

<div class="wrapper">
    <!-- center 必須寫在最前 -->
    <!-- center 多包一層 wrapper-->
    <div class="center-wrapper">
        <div class="center">
            <p>Say Hello To Tomorrow</p>
            <p>Say Goodbye To Yesterday</p>
        </div>
    </div>
    <div class="left">
        <p>Hello World</p>
    </div>
    <div class="right">
        <p>Thank You</p>
    </div>
</div>

* {
    margin: 0;
    padding: 0;
}
.center {
    background-color: skyblue;
    /* 4、給中間欄本身設置外邊距，爲左右兩欄預留位置 */
    margin-left: 220px;
    margin-right: 220px;
}
.center-wrapper {
    /* 1、三欄同時設置左浮動，此時它們處於同一行 */
    float: left;
    /* 2、中間欄設置寬度自適應，此時左右兩欄被擠到下一行 */
    width: 100%;
}
.left {
    width: 200px;
    background-color: lightskyblue;
    /* 1、三欄同時設置左浮動，此時它們處於同一行 */
    float: left;
    /* 3、左右兩欄設置負外邊距，使它們回到同一行 */
    margin-left: -100%;
}
.right {
    width: 200px;
    background-color: deepskyblue;
    /* 1、三欄同時設置左浮動，此時它們處於同一行 */
    float: left;
    /* 3、左右兩欄設置負外邊距，使它們回到同一行 */
    margin-left: -200px;
}

【 閱讀更多 CSS 系列文章，請看 CSS學習筆記 】