一、CSS两栏布局
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,则另一侧也需要做相应更改,维护起来比较麻烦。
2.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;
}
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以上的浏览器才支持该布局方式。
4.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布局后的又一种布局方式,不过其兼容性更差。