html固定右侧显示,html+css布局之--左边固定宽，右侧自适应（4种方法）

今天，在网上看到一个题目，关于布局的，左边固定宽，右侧自适应(不少于3种方法)，看到问题手痒自己试了一下，想了四种方法，码一下。

有好的方法，可以告诉我！

html:

第一种:定位+margin-left

左侧定宽200px

右侧自适应

第二种：flex

左侧定宽200px

右侧自适应

第三种：定位+浮动+padding-left+ box-sizing

左侧定宽200px

右侧自适应

第四种:浮动

左侧定宽200px

右侧自适应

css:

* {

margin: 0;

padding: 0;

}

/*****第一种******/

.cont {

height: 200px;

overflow: hidden;

border: 1px solid #000;

}

.one {

width: 200px;

height: 200px;

background: #ccc;

position: absolute;

}

.two {

height: 200px;

background: #f60;

margin-left: 200px;

}

/*****第二种******/

.cont1 {

height: 200px;

overflow: hidden;

border: 1px solid #000;

display: flex;

}

.a {

width: 200px;

height: 200px;

background: #ccc;

}

.b {

height: 200px;

background: #f60;

flex: 1;

}

/****第三种*******/

.cont2 {

height: 200px;

border: 1px solid #000;

position: relative;

overflow: hidden;

}

.a1 {

width: 200px;

height: 200px;

background: #ccc;

position: absolute;

left: 0;

top: 0;

}

.b1 {

width: 100%;

height: 200px;

background: #f60;

position: absolute;

left: 200px;

top: 0;

padding-right: 200px;

box-sizing: border-box;

}

/*****第四种******/

.cont3 {

height: 200px;

border: 1px solid #000;

}

.a2 {

width: 200px;

height: 200px;

background: #ccc;

float: left;

}

.b2 {

width: 100%;

height: 200px;

background: #f60;

}

自己码一下，效果更好！