此类情况下，一般每个区块或者图片的间隔，都会使用margin-right: 20px;类似的方法，但最右侧的一个区块/图片要求与显示区域无间隔，这时候最简单的方法就是使用:last-child，意为最后:指定属于其父元素的最后一个子元素.  也就是指定最后一个区块/图片，针对性的设置margin-right: 0; 即可代表去除了最后一个区块的右侧距。

下面看实际案例代码：

HTML代码：

<div class="tool">
    <div class="list">
      <div class="title">快速建站</div>
      <span>一站式建立网站</span><br>
      <a href="#" target="_blank">
      <div class="icon">GO</div>
      </a> <img src="images/icon.png"> </div>
    <div class="list">
      <div class="title">快速建站</div>
      <span>一站式建立网站</span><br>
      <a href="#" target="_blank">
      <div class="icon">GO</div>
      </a> <img src="images/icon.png"> </div>
    <div class="list">
      <div class="title">快速建站</div>
      <span>一站式建立网站</span><br>
      <a href="#" target="_blank">
      <div class="icon">GO</div>
      </a> <img src="images/icon.png"> </div>
    <div class="list">
      <div class="title">快速建站</div>
      <span>一站式建立网站</span><br>
      <a href="#" target="_blank">
      <div class="icon">GO</div>
      </a> <img src="images/icon.png"> </div>
  </div>

CSS代码：

.tool{margin-bottom: 20px; overflow: hidden;}
.tool .list{float: left;margin-right: 20px; /*第一步统一右侧距为20px */
 width: 238px; height: 108px; margin-right: 20px; padding: 10px 20px; border: 1px solid #ededed; overflow: hidden; position: relative}
.tool .list .title{font-size: 18px; margin-top: 16px; color: #000;font-family:"黑体";}
.tool .list:last-child{margin-right: 0;}/*在此使用了  :last-child  并且设置右侧距为0 */
.tool .list span{font-size: 12px; color: #666; overflow: hidden;}
.tool .list a{text-decoration: none;}
.tool .list .icon{ margin-top: 20px; width: 34px; height: 18px; line-height: 18px; text-align: center;
 color: #e63434; border: 1px solid #e63434; border-radius: 12px;
 font-size: 14px;}
.tool .list img{float: right; position: absolute; top: 10px; right: 20px;}

经适用于一行多个区块/图片的情况下，多行以后再分享！