第一种：float 单一层浮动法
例如：左侧固定成100px; 则核心代码 左侧：100px;float:left; 右侧 auto;margin-left:100px;
实例：
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>z-index</title> <style type="text/css"> *{margin:0;padding:0;} .container{height:200px;} .left{100px;border-right:none;height:50px;float:left;background-color:yellow;} .right{margin-left:100px;auto;height:100px;background-color:blue;} </style> </head> <body> <div class="container"> <div class="left"></div> <div class="right"></div> </div> </body> </html>
第二种 定位 ，在固定元素上加入绝对定位，自适应元素设置成margin-left:固定元素的宽度
实例：
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>z-index</title> <style type="text/css"> *{margin:0;padding:0;} .container{height:200px;} .left{100px;height:50px;background-color:blue;position:absolute;left:0;top:0;} .right{margin-left:100px;height:100px;background-color:yellow;} </style> </head> <body> <div class="container"> <div class="left">left</div> <div class="right">right</div> </div> </body> </html>
第三种 定位 ，用css3的 calc()进行计算
实例：
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>z-index</title> <style type="text/css"> *{margin:0;padding:0;} .container{height:200px;} .left{100px;height:50px;background-color:blue;} .right{ calc(100% - 100px); height:100px;background-color:yellow;} </style> </head> <body> <div class="container"> <div class="left">left</div> <div class="right">right</div> </div> </body> </html>