html两栏 自适应布局,CSS中2种最基本的两列自适应布局

CSS中最基本的两列自适应布局，你掌握过没呢，分享下呢。

左边自适应宽度需要用.wrap包裹起来，设置.wrap的margin-right为负值，内部.left的margin-right为正值，两个值相等，互相抵消。

方式一：.container{

width: 100%;

height: 50px;

border: 1px solid #000;

}

.wrap{

width: 100%;

line-height: 50px;

background-color: greenyellow;

float: left;

margin-right: -200px;  /*与内部.left的值相互抵消*/

}

.wrap > .left{

text-align: right;

margin-right: 200px;

}

.right{

width: 200px;

line-height: 50px;

background-color: plum;

float: right;

}

左边自适应

右边固定宽度200px

方式二：如果使用flex布局，就方便多了：.container{

width: 100%;

height: 50px;

border: 1px solid #000;

display: flex;

}

.left{

width: 100%;

line-height: 50px;

background-color: chocolate;

text-align: right;

flex-grow: 1;

}

.right{

width: 200px;

line-height: 50px;

background-color: plum;

float: right;

}

左边自适应

右边固定宽度200px

OK，大家可以试着弄下呢。