如何并排放置2张图像，它们之间没有空格？

Question

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

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

当我将2张图像彼此相邻放置，宽度为父母的50％时，它们总是缠得太宽而不能并排放置，最终像块元素一样堆叠在彼此的顶部。

为什么会这样？

如何在占据父div的整个宽度的同时并排放置2个图像，它们之间没有任何空间。宽度为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%;
}

这导致了

Answer 1

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

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

Answer 2

这可以使用Lastrow属性来指定HTML元素的类名。

您的HTML代码将如下所示

Debug.Print

并使用以下代码作为CSS

Class

这将清除图像容器后的浮动

<div class="row">
<div class="column">
<img src=http://www.planwallpaper.com/static/images/kitty-cat.jpg alt="planwallpaper" style="width:100%">
</div>
<div class="column">
<img src="http://www.planwallpaper.com/static/images/kitty-cat.jpg"alt="Forest" style="width:100%">
</div>