<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>左边定宽，右边自适应</title>
<style>
/* 基本样式 */
.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);
}
</style>
</head>
<body>
<div style="padding: 20px 20px;">
<span style="color: #ff6c60;">选择不同的方案查看效果:</span>
<select id="select">
<option value="0">双 inline-block 方案</option>
<option value="1">双 float 方案</option>
<option value="2">float + margin-left方案</option>
<option value="3">float + BFC方案</option>
<option value="4">absolute + margin-left方案</option>
<option value="5">flex 方案</option>
<option value="6">grid 方案</option>
</select>
</div>
<div style="padding: 20px;">
<span style="color: #ff6c60;">选择右侧不同的高度:</span>
<select name="" id="changeHeight">
<option value="1">右侧很低</option>
<option value="0">右侧很高</option>
</select>
</div>
<div class="wrapper wrapper-inline-block" id="wrapper">
<div class="left">
左边固定宽度，高度不固定,</br>
</br>
</br>
</br>
高度有可能会很小，也可能很大。
</div>
<div class="right">
这里的内容可能比左侧高，也可能比左侧低。宽度需要自适应。</br>
基本的样式是，两个div相距20px, 左侧div宽 120px
</div>
</div>
<script>
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;
}
})
</script>
</body>
</html>
原文：https://zhuqingguang.github.io/2017/08/16/adapting-two-layout/
原文地址：https://www.cnblogs.com/shen076/p/12643818.html
时间： 2024-09-28 17:50:16