实现一个两边固定宽度，例如（各200px），中间根据浏览器的视口大小自适应，这种布局称为双飞翼布局或者圣杯布局，某宝的布局就是如此。
1.采用float实现，兼容性最好，代码如下：
<!DOCTYPE html>
<html>
<meta charset="utf-8">
<head>
<style>
.content{
width: 100%;
min-width: 600px;
padding: 0 200px;
box-sizing: border-box;
}
.content div{
float: left;
}
.center{
width: 100%;
background: blueviolet;
}
.left,.right{
width: 200px;
}
.left{
background:pink;
margin-left: -200px;
}
.right{
background:yellow;
margin-right: -100%;
}
</style>
</head>
<div class="content">
<div class="left">left</div>
<div class="center">center</div>
<div class="right">right</div>
</div>
<body>
</body>
</html>
效果如下：
2.采用flex布局，这就简单了，代码如下：
<!DOCTYPE html>
<html>
<meta charset="utf-8">
<head>
<style>
*{
padding: 0;
margin: 0;
border: 0;
}
.content{
width: 100%;
display: flex
}
.center{
flex-grow: 1;
background: blueviolet;
}
.left{
background:pink;
flex-basis: 200px;
}
.right{
flex-basis: 200px;
background:yellow;
}
</style>
</head>
<div class="content">
<div class="left">left</div>
<div class="center">center</div>
<div class="right">right</div>
</div>
<body>
</body>
</html>