Html CSS中刷新的IMG块行

我试图做的可能最好用一个粗略的模拟图像来解释：

也就是说，在一行中有三个刷新图像的“块”。最上面的两个紧挨着，然后是下面的另一个图像之间的间隙为零

我发现了一种在Firefox中似乎有效的方法，但在IE中却产生了漏洞：

<div style="float: left; margin-left: 3px;">
  <img src="1.png" style="float:left;"/>
  <img src="2.png" />
  <img src="3.png" />
</div>

请原谅内联样式，它们仅用于测试。我很高兴见到你。不必漂浮：留下一堆东西，和2。不必在它们之间指定合理的余量。任何“自然”利润都可以

---

一定有比这更好的办法。有人能帮忙吗？

像这样使用怎么样

img{
    width: 20px;
    height: 20px;
    background-color: red;
    display: inline-block;
    margin-right: -3px;
    border: 1px solid blue;
}
img:last-child{
    display: block;
    width: 43px;

}

---

对于div，将行高度设置为0

<div style="float: left; margin-left: 3px; width:100px; line-height:0">
  <img src="http://lorempixel.com/50/50/" style="float:left;"/>
  <img src="http://lorempixel.com/40/50/" />
  <img src="http://lorempixel.com/90/50/" />
</div>

.

像这样

CSS

*{
    margin:0;
    padding:0;
}
img{
    width: 50px;
    height: 30px;   
    display: inline-block;   
    border: 1px solid black;


}
img:last-child{
    display: block;
    width:auto;
    margin:-5px 0;


}

---

这里有一种避免自定义边距的方法：您可以通过设置所有图像之间的间距来删除下面的空白，这与我需要的正好相反。在下面设置一个负边距感觉很脏-我可以这样做，我已经有了。左浮动元素需要-4px边距来消除间隙。看起来在前两个之间仍然有间隙。所有部件应相互齐平，没有间隙。