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

Question

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

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

由于此内容是用户通过管理面板生成的，因此我无法将每个图像显式包装在其自己的 div 中（我通常可以在其中应用填充）。我还有其他路线可以走吗？

谢谢！

score 1 · Accepted Answer

正如Flauwekeul 所提到的，负利润起到了作用。

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

1 回答 1