左右两栏布局

在网页中我们常常看见有左右两栏布局，左边宽度固定，右边宽度自适应的，比如下面这样

那么怎样实现这样的布局呢？我们可能会想到浮动，flex，grid布局等等。

新建一个HTML页面，结构如下

<div class="wrapper">

    <div class="list">

        <ul>

            <li>列表1</li>

            <li>列表2</li>

            <li>列表3</li>

            <li>列表4</li>

        </ul>

    </div>

    <div class="context">

        内容内容

    </div>

</div>

使用浮动布局，样式可以这样写

.list {

    float: left;

    width: 200px;

}

.context {

    border-left: 200px solid #999;

    height: 500px;

}

使用flex布局，样式可以这样写

.wrapper {

    display: flex;

}

.list {

    width: 200px;

    background: #999;

}

.context {

    flex: 1;

    height: 500px;

}

使用grid布局，样式可以这样写

.wrapper {

    display: grid;

    grid-template-columns: 200px auto;

}

.list {

    background: #999;

}

.context {

    height: 500px;

}

总结：布局实现方法多种多样，选择那一种当然是仁者见仁，智者见智了，但是兼容问题也不能忽视。