一、前言
CSS两栏布局指的是在一个容器（container）中，其中一侧定宽布局，而另一侧自适应，自动填满剩余的空间。下面我们以“左侧定宽，右侧自适应”为例，采用几种不同的方式来实现此布局。
二、布局方式
1.position布局
HTML代码如下：
<body>
<div class="left"></div>
<div class="right"></div>
</body>CSS代码如下：
.left{
width: 200px;
height: 100px;
background-color:blue;
}
.right{
height: 100px;
position: absolute;
top: 0;
left: 200px;
right: 0;
bottom:0;
background-color:red;
}该布局方式其实不太灵活，需要手动计算和修改定位边的距离。如果定宽部分设置了margin、padding、border，则另一侧也需要做相应更改，维护起来比较麻烦。
二、float布局
HTML代码如下：
<body>
<div class="left"></div>
<div class="right"></div>
</body>CSS代码如下：
.left{
width: 200px;
height: 100px;
float: left;
background-color:blue;
}
.right{
height: 100px;
background-color:red;
}该布局方式更简洁，将左侧设置为浮动布局，右侧元素自然就跟随着浮动了，根据需要，可以在右侧元素后清除浮动（实际上，在此种方式下，不用设置清除浮动，该布局为流式布局）。
.right::after{
content:"";
clear: both;
}三、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布局吧。
四、grid布局
HTML代码如下：
<div class="container">
<div class="left"></div>
<div class="right"></div>
</div>CSS代码如下：
.container{
width: 100%;
height: 100px;
display: grid;/*设置为grid布局*/
grid-template-columns:200px auto;/*设置每一列的宽度*/
}
.left{
background-color:blue;
}
.right{
background-color:red;
}gird布局是继flex布局后的又一种布局方式，不过其兼容性更差。
五、总结
通过上文的分析，咱们可以有四种布局方式，以实现左侧定宽、右侧自适应的布局。
- position布局：兼容性好，不过维护困难
- float布局：兼容性好，遵循流式布局原理
- flex布局：必须要IE9以上浏览器才支持，不过使用灵活、方便
- grid布局：兼容性相对较差
3602
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
