css实现两栏布局
两栏布局指的是在一个容器（container）中，其中一侧定宽布局，而另一侧自适应，下面采用几种不同的方法来实现。
html部分
<!DOCTYPE html>
<html>
<head>
<title>两栏布局</title>
</head>
<body>
<div class="container">
<div class="left">这里是左边</div>
<div class="right">这里是右边</div>
</div>
</body>
</html>
1. float
两个div就能实现(可以去掉<div class="container"> </div>)。只需将左边div设置为浮动，并加上宽度，就可以实现两栏布局。
代码如下：
<style type="text/css">
.left{width: 50%;
height: 500px;
background-color: pink;
float: left;}
.right{height: 500px;
background-color: blue;}
</style>
2. absolute
需要三个div来实现。一个为父元素，另外两个作为左、右子元素，将父元素设为相对定位，左右两个子元素设置为绝对定位，给左边的子元素设置宽度，将右边子元素设置left为左边子元素的宽度值，right设置为0，就可以实现两栏布局。
代码如下：
<style type="text/css">
.container{position: relative;
width: 100%;
height: 500px;}
.left{position: absolute;
width: 50%;
height: 500px;
background-color: pink;}
.right{position: absolute;
left: 50%;
right: 0;
height: 500px;
background-color: blue;}
</style>
3. flex布局
使用flex布局。需要三个div，一个为父元素，另外两个作为左、右子元素。父元素设置为display:flex;左右两边子元素为flex:1;(即左右两边宽度比为1:1)也可以设置为固定宽。即可实现两栏布局。
代码如下：
<style type="text/css">
.container{display: flex;
width: 100%;
height: 500px;}
.left{
flex: 1;
height: 500px;
background-color: pink;}
.right{
flex: 1;
height: 500px;
background-color: blue;}
</style>
4. grid布局
<style type="text/css">
.container{display: grid;
width: 100%;
height: 500px;
grid-template-columns: 50% 50%;//该属性可以设置每一列的宽度}
.left{
background-color: pink;}
.right{
background-color: blue;}
</style>
也可使用grid布局。这种方法也需要三个div.只需要在父元素上设置grid-template-columns: 50% 50%;即可。同样也可以设置为固定宽度。
5. table布局
<style type="text/css">
.container{display: table;
width: 100%;
height: 500px;}
.container div{display: table-cell;}
.left{width: 50%;
background-color: pink;
}
.right{width: 50%;
background-color: blue;
}
</style>
以上几种方法实现两栏布局的结果均为：
