自适应布局

常见自适应布局有两种：左侧固定右侧自适应、左右两侧固定中间自适应

左侧固定，右侧自适应

1、子元素 float:left

// html部分 <div class='container'> <div class="left">左侧固定</div> <div class="right">右侧自适应</div> </div> // css部分 .container{ position: relative; width: 100%; } .left{ float: left; width: 200px; height: 300px; background-color: green; } .right{ background-color: pink; height: 300px; }

2、子元素 width:calc()

// html部分 <div class='container'> <div class="left">左侧固定</div> <div class="right">右侧自适应</div> </div> // css部分 .container{ position: relative; width: 100%; } .left{ float: left; width: 200px; height: 300px; background-color: green; } .right{ float: left; width: calc(100% - 200px); background-color: pink; height: 300px; }

3、父元素 display: flex

// html部分 <div class='container'> <div class="left">左侧固定</div> <div class="right">右侧自适应</div> </div> // css部分 .container{ position: relative; width: 100%; display: flex; } .left{ width: 200px; height: 300px; background-color: green; } .right{ flex: 1; height: 300px; background-color: pink; }

左右2列固定，中间自适应

1、子元素 width:calc()

// html部分 <div class="container"> <div class="left">左侧定宽</div> <div class="mid">中间自适应</div> <div class="right">右侧定宽</div> </div> // css部分 .container { position: relative; width: 100%; } .left { float: left; width: 100px; height: 100%; background-color: #72e4a0; } .mid { float: left; width: calc(100% - 100px - 100px); height: 100%; background-color: #9dc3e6; } .right { float: left; width: 100px; height: 100%; background-color: #4eb3b9; }

2、父元素 display: flex

<div class="container"> <div class="left">左侧定宽</div> <div class="mid">中间自适应</div> <div class="right">右侧定宽</div> </div> // css部分 .container{ position: relative; display: flex; } .left{ width: 200px; height: 300px; background-color: green; } .right{ width: 200px; height: 300px; background-color: yellow; } .mid{ flex: 1; height: 300px; background-color: pink; }

 

转载于:https://www.cnblogs.com/00feixi/p/11269589.html

相关资源：后台管理自适应布局