html - 用户生成的 50% 宽度图像并排填充

Question

我正在使用 Kirby CMS 构建网站，我需要能够让用户将图像放在占容器 50% 并向左浮动的页面上(因此第二个 50% 图像将是旁边)。

我几乎让它工作了 - 图片并排，但如果我添加任何边距，第二张图片当然会换行。因为我使用了 box-sizing: border-box 我可以使用 padding 在它们之间创建一些空间，同时将它们保持在一条线上，但是图像有边框和阴影，这些边框和阴影会随着 padding 的增加而扩展。

因为此内容是用户通过管理面板生成的，所以我无法明确地将每个图像包装在自己的 div 中(我通常可以在其中应用填充)。我可以选择另一条路线吗？

谢谢!

Answer 1

正如 Flauwekeul 所提到的，负边距起到了作用。

img.half {
    float: left;
    max-width: 50%;
    margin-right: 20px;
}
img.half:nth-child(even) {
    margin-right: -20px;
}