One of the most common layouts is an adaptive two-column layout, where a page has two columns of content, one of which is spread out and the other automatically fills up the remaining width

1. Through 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>
Copy the code
.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 */
}
Copy the code

2. Using 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>
Copy the code
.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;
}
Copy the code

3, through the 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>
Copy the code
.wrap {
    /* grid container */
    display: grid;
    grid-template-columns: auto 1fr;
    grid-column-gap: 20px;
}
.left {
    background-color: lightskyblue;
}
.right {
    background-color: deepskyblue;
}
Copy the code