CSS实战笔记(十) 自适应双栏布局

自适应双栏布局是常见的布局之一，页面上有两列内容，一栏由内容撑开，另一栏自动撑满剩余宽度

1、通过 BFC 实现

<div class="wrap">
    <div class="left">
        <p>Hello World</p>
        <p>Good Night</p>
    </div>
    <div class="right">
        <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;
    /* BFC */
    overflow: hidden;
    zoom: 1; /* compatible with IE6 */
}

2、通过 Flex 实现

<div class="wrap">
    <div class="left">
        <p>Hello World</p>
        <p>Good Night</p>
    </div>
    <div class="right">
        <p>Say Hello To Tomorrow</p>
        <p>Say Goodbye To Yesterday</p>
    </div>
</div>

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

3、通过 Grid 实现

<div class="wrap">
    <div class="left">
        <p>Hello World</p>
        <p>Good Night</p>
    </div>
    <div class="right">
        <p>Say Hello To Tomorrow</p>
        <p>Say Goodbye To Yesterday</p>
    </div>
</div>

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

【 阅读更多 CSS 系列文章，请看 CSS学习笔记 】