实现一侧定宽、一侧自适应布局

一 flex两栏布局

<section>
    <main>main</main>
    <aside>aside</aside>
</section>

<style>
    section{
        display: grid;
        grid-template-rows: auto;
        grid-template-columns: 200px auto;
    }
    main{
        background-color: cornflowerblue;
        grid-row:1/2;
        grid-column:2/3;
        min-height: 300px;
    }
    aside{
        background-color: pink;
        grid-row: 1/2;
        grid-column: 1/2;
    }
</style>

二 grid两栏布局

<section>
    <main>main</main>
    <aside>aside</aside>
</section>
//例1
<style>
    section{
        display: grid;
        grid-template-rows: 300px;
        grid-template-columns: 200px auto;
    }
    main{
        background-color: cornflowerblue;
        grid-row:1/2;
        grid-column:2/3;
    }
    aside{
        background-color: pink;
        grid-row: 1/2;
        grid-column: 1/2;
    }
</style>

//例2
<style>
    section{
        display: grid;
        grid-template-columns: 200px 1fr;
        grid-template-rows: auto;
        grid-template-areas: "left right";
    }
    main{
        background-color: cornflowerblue;
        grid-area: right;
        min-height: 300px;
    }
    aside{
        background-color: pink;
        grid-area: left;
    }
</style>

三 传统float布局

需要适配低版本IE

<section>
    <aside>aside</aside>
    <main>main</main>
</section>

<style>
    section::after {
        content: '';
        display: block;
        clear: both;
    }
    main{
        background-color: cornflowerblue;
        min-height: 300px;
        margin-left: 200px;
    }
    aside{
        background-color: pink;
        width: 200px;
        min-height: 300px;
        float: left;
    }
</style>

四 圣杯布局

如果不但要适配低版本IE，同时对aside和main的顺序有要求，则可以考虑圣杯布局和双飞翼布局。

//特点：main在aside的DOM元素位置上方
//缺点：main的宽度不能小于aside
<section>
    <main>main</main>
    <aside>aside</aside>
</section>

<style>
    section{
        border: 1px solid red;
        padding-left: 200px;
    }
    section::after {
        content: '';
        display: block;
        clear: both;
    }
    main{
        background-color: cornflowerblue;
        width: 100%;
        height:300px;
        float: left;
    }
    aside{
        background-color: pink;
        width: 200px;
        float: left;
        margin-left: -100%;
        position: relative;
        left: -200px;
    }
</style>

五 双飞翼布局

//特点：main在aside的DOM元素位置上方
//缺点：main 里面还得加一层wrap
<section>
    <div class="wrapper">
        <main>main</main>
    </div>
    <aside>aside</aside>
</section>

<style>
    section::after {
        content: '';
        display: block;
        clear: both;
    }
    aside{
        background-color: pink;
        width: 200px;
        float: left;
        margin-left: -100%;
    }
    .wrapper{
        width: 100%;
        float: left;
    }
    main{
        background-color: cornflowerblue;
        height: 300px;
        margin-left: 200px;
    }
</style>