<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>test</title>
<style type="text/css">
*{
margin:0 0;
padding:0 0;
}
.container{
width:100%;
height:300px;
background-color:orange;
/*position: absolute;*/
}
.container1{
width:100%;
height:300px;
background-color:yellow;
}
.subcontainer{
width:600px;
height:250px;
background-color:purple;
/*opacity: 0.6;*/
position: relative;
margin:0 auto;
}
.son{
width:500px;
height:200px;
background-color:blue;
/*opacity:0.5;*/
position: relative;
margin:0 auto;
}
.jobcontainer{
width:210px;
height:150px;
background-color:yellow;
/*opacity:0.6;*/
margin:0 auto;
/*padding:10px 0px;
box-sizing:border-box;*/
}
.job{
width:50px;
height:50px;
background-color:red;
/*opacity:0.9;*/
float:left;
margin-right:30px;
margin-bottom:20px;
}
.job1{
float:left;
width:50px;
height:50px;
background-color:green;
/*opacity:0.9;*/
}
</style>
</head>
<body>
<div class="container">
<div class="subcontainer">
<div class="son">
<div class="jobcontainer">
<div class="job"></div>
<div class="job"></div>
<div class="job1"></div>
<div class="job"></div>
<div class="job"></div>
<div class="job1"></div>
</div>
</div>
</div>
</div>
<div class="container1">
<div class="subcontainer">
<div class="son">
<div class="jobcontainer">
<div class="job"></div>
<div class="job"></div>
<div class="job1"></div>
<div class="job"></div>
<div class="job"></div>
<div class="job1"></div>
</div>
</div>
</div>
</div>
</body>
</html>
效果图