<!DOCTYPE html> <html lang="en"> <style> html,body{ padding: 0;margin: 0; } div{ font-size: 12px; } </style> <head> <meta charset="UTF-8"> <title>Title</title> <meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1.0,maximum-scale=1.0,user-scalable=no" /> </head> <body> <div style="width: 100%;height: 50px;background: red;"> <div style="float: left;width: auto; background: green;height: 100%;"> 区域1自适应: </div> <div style="height: 100%;background: brown;overflow: hidden"> <div style="float: right;height: 100%;background: blue;width: 60px;"> 区域2固定宽度60 </div> <div style="height: 100%;background: yellow;width: auto; overflow: hidden"> <div style="float: left;width: 100px;background: gold;height: 100%;"> 区域3固定宽度100px </div> <div style="background: rebeccapurple;height: 100%;overflow: hidden"> <!--内容垂直水平居中--> <div style="width: 100%;height: 100%;display: table;text-align: center"> <div style="width: 100%;height: 100%;display: table-cell;vertical-align: middle;"> 区域4自适应剩下的宽度 </div> </div> </div> </div> </div> </div> </body> </html>
运行效果：
