CSS两栏布局的几种实现方式

前两天我分享了如何实现三栏布局，本次将分享如何实现另一个经典的布局方式，两栏布局。两栏布局也是前端面试常问的问题，其实现方式相比三栏布局其实更为简单。所谓的两栏布局，一般指的是“一侧定宽，一侧自适应”，在这篇文章中，我将分享实现两栏布局的4种方式。

一、前言

CSS两栏布局指的是在一个容器（container）中，其中一侧定宽布局，而另一侧自适应，自动填满剩余的空间。下面我们以“左侧定宽为200px，右侧自适应，且两侧的高度都为100px”为例，采用几种不同的方式来实现此布局。
在这里我们假设已经对所有元素设置了：

1 2	margin: 0; padding: 0;

二、布局方式

1.position布局

HTML代码如下：

<!--我们假设容器元素为body元素，实际情况，可自定义一个container -->
<body>
  <div class="left"></div>
  <div class="right"></div>
</body>

CSS代码如下：

/* 左侧布局 */
.left{
    width: 200px;
    height: 100px;
    background-color: blue;
 }
/* 右侧布局，注意left属性的值 */
.right{
    height: 100px;
    position: absolute;
    top: 0;
    left: 200px;
    right: 0;
    bottom: 0;
    background-color: red;
}

该布局方式其实不太灵活，需要手动计算和修改定位边的距离。如果定宽部分设置了margin、padding、border，则另一侧也需要做相应更改，维护起来比较麻烦。

2.float布局

HTML部分不变。
CSS部分：

/* 左侧部分 */
.left{
    width: 200px;
    height: 100px;
    float: left;
    background-color: blue;
}
/* 右侧部分 */
.right{
    height: 100px;
    background-color: red;
}

该布局方式更简洁，将左侧设置为浮动布局，右侧元素自然就跟随着浮动了，根据需要，可以在右侧元素后清除浮动（实际上，在此种方式下，不用设置清除浮动，该布局为流式布局）。

/* 清除浮动 */
right::after{
    content: "";
    clear: both;
}

3.flex布局

HTML部分：

<div class="container">
   <div class="left"></div>
   <div class="right"></div>
</div>

CSS代码如下：

.container{
    width: 100%;
    height: 100px;
    display: flex; /*设置布局方式为flex布局，一定要在父元素上设置*/
}
.left{
    flex-basis: 200px;/*定宽*/
    background-color: blue;
}
.right{
    flex: auto; /*自动填满*/
    background-color: red;
}

实际上，flex布局应该是最灵活、最方便的响应式布局方式了，不过其也有一个缺点，那就是必须要IE9以上的浏览器才支持该布局方式。如果不需要兼容IE9及以下浏览器，尽情的使用flex布局吧。

4.grid布局

HTML代码部分与flex布局一致
CSS部分：

.container{
    width: 100%;
    height: 100px;
    display: grid; /*设置为grid布局*/
    grid-template-columns: 200px auto; /*设置每一列的宽度*/
}
.left{
    background-color: blue;
}
.right{
    background-color: red;
}

gird布局是继flex布局后的又一种布局方式，不过其兼容性相对来说要差一些。

5.table布局

HTML与flex布局一致
CSS部分：

.container {
    width: 100%;
    height: 100px;
    display: table;/* 设置为 table 布局 */
}
/* 将其子项设置为 table-cell 布局 */
.left, .right {
    display: table-cell;
}
.left {
    width: 200px;
    background-color: red;
}
.right {
    background-color: blue;
}

table布局很形象，就把其理解为一个表格。不过在实际运用中其实用得比较少。

三、总结

通过上文的分析，咱们可以有四种布局方式，以实现左侧定宽、右侧自适应的布局。

position布局：兼容性好，不过维护困难
float布局：兼容性好，遵循流式布局原理
flex布局：必须要IE9以上浏览器才支持，不过使用灵活、方便
grid布局：兼容性相对较差
table布局：了解即可

四、下载代码

我将每种布局方式写入了单独的HTML文件，可点击此处下载示例代码压缩包。代码下载后，尽量在新版谷歌浏览器中查看效果。

您还有哪些好的布局方式呢？可以在下方留言分享哦！