Как разместить 2 изображения рядом без пробела между ними?

Question

Я сделал эту простую ручку, чтобы объяснить мою проблему

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

Когда я помещаю 2 изображения рядом друг с другом шириной 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%;
}

В результате получается

Answer 1

Это возможно с атрибутом Class, который будет указывать имя класса для элемента 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;
 }

Answer 2

С помощью предоставленного вами примера кода вы можете перемещать изображения, и они будут располагаться рядом без полей.

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