在实际开发中，很多情况下需要多个div有间隙的并排显示，下面是我总结的几种方法。
这是我们要实现的效果图
一、使用float浮动
首先，根据要实现的效果图，写出HTML。
<div class="service w960">
<h3>主要业务/PRODUCTS SERVICES</h3>
<div class="yw">
<img src="./images/business1.png" alt="">
<dl>
<dt>投资业务</dt>
<dd>证券投资业务，指银行购买有价证券的活动</dd>
</dl>
<a href="#">立即咨询</a>
</div>
<div class="yw">
<img src="./images/business2.png" alt="">
<dl>
<dt>投资业务</dt>
<dd>证券投资业务，指银行购买有价证券的活动</dd>
</dl>
<a href="#">立即咨询</a>
</div>
<div class="yw">
<img src="./images/business3.png" alt="">
<dl>
<dt>投资业务</dt>
<dd>证券投资业务，指银行购买有价证券的活动</dd>
</dl>
<a href="#">立即咨询</a>
</div>
<div class="yw last">
<img src="./images/business4.png" alt="">
<dl>
<dt>投资业务</dt>
<dd>证券投资业务，指银行购买有价证券的活动</dd>
</dl>
<a href="#">立即咨询</a>
</div>
</div>然后根据要实现的效果图，写出CSS（写好字体，盒子的大小、距离等）。
*{margin: 0;padding: 0;}
.w960{
width: 960px;
margin-left: auto;
margin-right: auto;
}
body{
font: normal normal 16px/1.5 "宋体";
}
.service h3{
font-size: 20px;
text-align: center;
padding-top: 60px;
margin-bottom: 60px;
}
.service .yw{
width: 225px;
margin-right: 20px;
}
.service dl dt{
color: #e75255;
}
.service dl dd{
font-size: 12px;
color: #9f9f9f;
}
.service .yw a{
display: inline-block;
text-decoration: none;
background-color: #4b4b4b;
width: 105px;
height: 40px;
color: #fff;
text-align: center;
line-height: 40px;
margin-top: 10px;
}效果图：
此时，四个盒子并没有在一行并排显示，原因是因为div是块级元素，块级元素独占一行。这时就需要用浮动，让四个div并排显示（即在.service .yw里面加上float:left;）。看一下效果图。
此时，前三个盒子正常显示，第四个盒子还在下面。原因是：大盒子service的宽度是960px，四个div宽度都是225px，四个div的margin-right是20px。225*4+20*4=980px。980px>960px。此时，需要去掉最后一个div的margin-right（即在CSS代码中加入.service .last{margin-right: 0;}。此时，便可以正常显示了。
二、使用inline-block
除了用浮动让四个div并排显示，还可以使用inline-block。给.service .yw加上displayi:nline-block;使用inline-block有几个问题。
a.盒子中有文本并没有对齐。
解决办法：vertical-align:top;
b.盒子与盒子之间有间隙。（原因：代码换行造成的间隙。）
解决办法：①去掉换行。
②给四个div最外层包一个div，并设置font-size:0;
此时，四个小盒子里的字体受到影响。这需要我们单独给四个小盒子设置字体大小。（即给.service .yw加上font-size:16px;）。
注意：我们要给CSS代码加上*display:inline;*zoom:1;这行代码是为了兼容IE的。此时就可以正常显示了。
三、使用margin负值
可以把最后一个盒子margin-right设置为0，解决问题。同样也可以使用margin为负值的办法解决。这时需要给四个盒子的外层包一个div。如果我们不给这个盒子设置宽度，它的宽度默认是auto，表现贪婪性，会占父元素的100%。给这个新加的盒子设置margin-right:-20px;后，他会增加盒子的宽度，增加到980px，保证了width + margin-right =960px。此时，页面便可以正常显示了。