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学习笔记 】