左侧固定，右侧自适应布局
Posted shen076
tags:
篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了左侧固定，右侧自适应布局相关的知识，希望对你有一定的参考价值。
<!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/
以上是关于左侧固定，右侧自适应布局的主要内容，如果未能解决你的问题，请参考以下文章