html - CSS中刷新的IMG块行

Question

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

也就是说，连续存在三个刷新图像的“块”。顶部的两个彼此相邻，然后另一个在它们下方。图像之间的间隙为零。

我找到了一种似乎在 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>

请原谅内联样式，它们仅用于测试。最好 1. 不必浮动：留在一堆东西上，以及 2. 不必在它们之间指定合理的边距。任何“自然”边距都可以。

一定有比这更好的方法。任何人都可以帮忙吗？

Answer 1

这样用怎么样？

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;

}

演示

Answer 2

对于 div，将 line-height 设置为 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>

小提琴。

Answer 3

像这样

演示

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;


}