Разделите экран на два изображения, расположенных рядом по горизонтали, с одинаковыми размерами, используя HTML и CSS. ⇐ Html

[Anonymous]

Я использую тег div шириной 100% и высотой 100%. Под div я поместил свое первое изображение шириной 50%. Когда я помещаю второе изображение с той же шириной 50%, второе изображение оказывается внизу первого изображения. Если я изменю ширину на 49 %, второе изображение будет выравниваться по правой стороне первого изображения (что и ожидалось).
В любом случае ширина div равна 100 %, почему второе изображение уменьшается, если я устанавливаю ширину 50 %?

Код: Выделить всё

body {
margin: 0px;
}

div {
width: 100%;
height: 100%;
}

.first-image {
width: 50%;
height: 100%;
outline: 0px;
}

.second-image {
width: 50%;
height: 100%;
outline: 0px;
}

Код: Выделить всё

project




[img]https://media.istockphoto.com/id/173682323/photo/says.jpg?s=612x612&w=0&k=20&c=7jnXQrYzUWNTnLhjPgimxHIbjsaHvZmAMALGVzYNARQ=[/img]
[img]https://ichef.bbci.co.uk/news/640/cpsprodpb/37B5/production/_89716241_thinkstockphotos-523060154.jpg[/img]

Подробнее здесь: https://stackoverflow.com/questions/753 ... dimensions