bootstrap 右自适应 左_左侧固定，右侧自适应布局

左边定宽，右边自适应

/* 基本样式 */

.wrapper {

padding: 15px 20px;

border: 1px dashed #ff6c60;

}

.left {

width: 120px;

border: 5px solid #ddd;

}

.right {

margin-left: 20px;

border: 5px solid #ddd;

}

/******************** 左侧 float, 右侧 margin-left ***********************/

.wrapper-float .left {

float: left;

}

.wrapper-float .right {

margin-left: 150px;

}

/******************** 左侧 float, 右侧 BFC ***********************/

.wrapper-float-bfc .left {

float: left;

}

.wrapper-float-bfc .right {

overflow: hidden;

}

/******************** 左侧 绝对定位, 右侧 margin-left ***********************/

.wrapper-absolute .left {

position: absolute;

}

.wrapper-absolute .right {

margin-left: 150px;

}

/******************** flex布局 ***********************/

.wrapper-flex {

display: flex;

}

.wrapper-flex .left {

flex: none;

}

.wrapper-flex .right {

flex: auto;

}

/******************** grid布局 ***********************/

.wrapper-grid {

display: grid;

grid-template-columns: 120px 1fr;

}

/*********** 左右 inline-block, 然后右侧 calc 计算宽度 ******************/

.wrapper-inline-block {

font-size: 0;

}

.wrapper-inline-block .left,

.wrapper-inline-block .right {

display: inline-block;

vertical-align: top;

font-size: 14px;

box-sizing: border-box;

}

.wrapper-inline-block .right {

width: calc(100% - 140px);

}

/******************** 左右 float, 然后右侧 calc 计算宽度 ***********************/

.wrapper-double-float .left,

.wrapper-double-float .right {

float: left;

box-sizing: border-box;

}

.wrapper-double-float .right {

width: calc(100% - 140px);

}

选择不同的方案查看效果:

双 inline-block 方案

双 float 方案

float + margin-left方案

float + BFC方案

absolute + margin-left方案

flex 方案

grid 方案

选择右侧不同的高度:

右侧很低

右侧很高

左边固定宽度，高度不固定,

高度有可能会很小，也可能很大。

这里的内容可能比左侧高，也可能比左侧低。宽度需要自适应。

基本的样式是，两个div相距20px, 左侧div宽 120px

var wrapper = document.querySelector('#wrapper')

document.querySelector('#select').addEventListener('change', function (event) {

var value = event.target.value

switch (+value) {

case 0: wrapper.className = 'wrapper wrapper-inline-block';

break;

case 1: wrapper.className = 'wrapper wrapper-double-float';

break;

case 2: wrapper.className = 'wrapper wrapper-float';

break;

case 3: wrapper.className = 'wrapper wrapper-float-bfc ';

break;

case 4: wrapper.className = 'wrapper wrapper-absolute';

break;

case 5: wrapper.className = 'wrapper wrapper-flex';

break;

case 6: wrapper.className = 'wrapper wrapper-grid';

break;

}

})

var rightDiv = document.querySelector('.right')

document.querySelector('#changeHeight').addEventListener('change', function (event) {

var value = event.target.value

switch (+value) {

case 0: rightDiv.style.height = "700px";

break;

case 1: rightDiv.style.height = "auto";

break;

}

})