<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
.containerx{
float: left;
}
#main-wrap{
margin:0 190px 0 190px;
}
.main{
background: black;
padding: 0 190px;
/*box-sizing: border-box;*/
color: white;
width: 100%;
height: 200px;
}
#leftwrap{
width: 190px;
margin-left: -100%;
background: gold;
height: 200px;
}
#rightwrap{
width: 190px;
margin-left: -190px;
background: gold;
height: 200px;
}
</style>
</head>
<body>
<!--让main占百分百宽度把旁边两个容器挤下去，然后用margin-left拉上来
然后把main-wrap的左右外边距等同两遍容器的宽度 空开位置-->
<div class="containerx main" >
<div id="main-wrap">
#main
</div>
</div>
<div class="containerx" id="leftwrap">
#left
</div>
<div class="containerx" id="rightwrap">
#right
</div>
</body>
</html>