代码编写中遇到的问题与解决——空隙问题

#代码编写中遇到的问题：
有一个页面右边上部分关于网站产品在介绍有三张图需要平铺显示，
效果图如下：
这个盒子整体在大小为518px，每张图片在宽度width为170px，如果平铺，宽度应该足够，前期写的代码如下：

 <div class="news">
      <div class="news1"><a href="#">本站快讯</a></div>
       <a href="#" class="flower"><img src="imgs/new1.jpg"></a>
       <a href="#" class="flower"><img src="imgs/new2.jpg"></a>
       <a href="#" class="flower"><img src="imgs/new3.jpg"></a>
</div>

显示效果如图：
这里可以看出，有一张图片被挤到了下面，而且上面两张图片之间也有距离。
##解决办法一：把三张图片各自装到一个盒子里，再浮动：

<div class="news confix">
  <div class="news1"><a href="#">本站快讯</a></div>
   <div class="news_flower">
       <a href="#" class="flower"><img src="imgs/new1.jpg"></a>
   </div>
   <div class="news_flower">
       <a href="#" class="flower"><img src="imgs/new2.jpg"></a>
    </div>
    <div class="news_flower">
       <a href="#" class="flower"><img src="imgs/new3.jpg"></a>
    </div>

.rg .news .news_flower .flower {
    float: left;
    margin-left: 2px;
}

效果如图：

##解决办法二：
把a元素变成块盒，再浮动：

<div class="news confix">
      <div class="news1"><a href="#">本站快讯</a></div>
       <a href="#" class="flower"><img src="imgs/new1.jpg"></a>
       <a href="#" class="flower"><img src="imgs/new2.jpg"></a>
       <a href="#" class="flower"><img src="imgs/new3.jpg"></a>
</div>

.rg .news .flower {
    display: block;
    float: left;
    margin-left: 2px;
}

显示效果如下：

总结：这两种方法都解决了图片排列中产生的问题，问题产生的原因是a元素换行本身带来的空隙，这是默认的没办法修改；所以可以改变图片所在的元素属性：
方法一，将图片装到div里面，变成了块盒，这样浮动之后，元素之间没有间距，再根据页面调整边距；
方法二，讲a元素直接变成块盒，也解决了空隙问题