html

<div class="art clearfix">
    <div class="slide">
      <div class="child">di</div>
    </div>
    <div class="main"></div>
  </div>

css

.art{
  width:400px;
  height:100px;
  margin:0 auto; 
  background:#ddd;
}
.art>.slide{
  float:left;
  width:33.33333333%;
  height:100px;
  border:1px solid black;
  background:red;
}
.art>.main{
  float:left;
  width:66.666666%;
  height:100px;
  background:black;
}
.art>.slide>.child{
  margin-right:20px;
  border:1px solid black;
} 

image.png

不添加child的方法（浏览器支持calc）

.art{
  width:400px;
  height:100px;
  margin:0 auto; 
  background:#ddd;
}
.art>.slide{
  float:left;
  width: calc(33.33333333% - 20px);
  margin-right:20px;//设置间隔
  height:100px;
  border:1px solid black;
  background:red;
}
.art>.main{
  float:left;
  width:66.666666%;
  height:100px;
  background:black;
}

image.png