Html 如何使两个相邻的浮动图像与上面和下面的图像对齐？

我的公文包页面上大多只有一张图片，但我想在每个页面的中间位置插入两张图片/视频。你可以在这里看到：

图像被设置为10px全方位填充，当两个50%的图像相邻浮动时，这当然会弄乱填充。我已经试着改成更小的尺码（48%），但它仍然不合适，我就是不知道该怎么做

因此，HTML是

<img class="one img-responsive" />
<img class="one img-responsive" /> 
<img class="one img-responsive" />
...

<img class="two img-responsive" />
<img class="two img-responsive" />

---

我就是想不出最好的办法。

看看，把你的垫子和50%放在一起；）啊，真是天才！谢谢你！看，将你的填充和50%放在一起；）啊，真是天才！谢谢你！

.img-responsive {
padding: 10px;
float: left;
}

img.one {
max-width: 100%;
}

img.two {
max-width: 48%;
}