如何并排放置 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%;
}

这会导致

Answer 1

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

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

Answer 2

这可以通过Classattribute 来实现，它将指定HTML 元素的类名。

您的 HTML 代码将如下所示

<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>

并为 CSS 使用以下代码

.column {
float: left;
width: 33.33%;
padding: 5px;
}

这将在图像容器之后清除浮动

.row::after {
 content: "";
 clear: both;
 display: table;
 }