<!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>
运行效果：