html - 如何让两个浮动图像彼此相邻以与上方和下方的图像对齐？

Question

我的作品集页面上主要有单个图像，但我想在每个中途添加两个图像/视频。你可以在这里看到：https ://kaye.hu/ett/islovingherself

图像全部设置为 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" />

和 CSS：

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

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

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

我只是想不出最好的方法。

标签： htmlcssresponsive