css - 如何并排放置2张图像而在它们之间没有空格？

我用一支简单的笔来解释我的问题

https://codepen.io/yonatanmk/pen/VdwGvG

当我以父图像的50％的宽度并排放置2张图像时，它们总是缠绕得太宽而无法并排放置，最终像块元素一样堆叠在一起。

为什么会这样？

如何在占据父div的整个宽度的同时并没有两个空格的情况下并排放置两个图像。宽度为49％可以将图像并排放置，但是现在它们之间有一个空间。

显示：内联块似乎没有帮助。

谢谢

我的密码

html

<div>
  <img src="http://www.planwallpaper.com/static/images/kitty-cat.jpg" />
  <img src="http://www.planwallpaper.com/static/images/kitty-cat.jpg" />
 <div>

的CSS

div {
  width: 500px;
}

img {
  width: 50%;
}

这导致

最佳答案

使用您提供的代码示例，您可以浮动图像，这将使它们并排放置而没有空白。

img {
  width: 50%;
  float: left;
}