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

Question

我做了这个简单的笔来解释我的问题

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

当我将 2 个图像并排放置时，它们的宽度为父级的 50%，它们总是太宽而无法并排放置，最终像块元素一样堆叠在一起。

为什么会这样？

如何将 2 个图像并排放置，同时占据父 div 的整个宽度，而它们之间没有任何空间。具有 49% 的宽度允许图像并排放置，但现在它们之间有一个空间。

display : inline-block 似乎没有帮助。

谢谢

我的代码

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%;
}

这导致

标签： cssimage

Answer 1

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

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