Create a collage of images in CSS - html

Question

I'm working on a project and I got to a place where I decided to realized a collage.
I have done the collage already and it is here: Fiddle
But I would like to do the same thing without using the property float on the elements of div1.
If possible, I would like to use only the properties right and left on the element of div1 without reducing the size of the elements of that div.
Sorry I'm not a native English speaker, I'm trying my best.

Answer 1

Hopefully, you would like to see something like this:
body {
width: 380px;
margin: 0 auto;
}
.div1{
text-align:justify;
}
.div1:after {
content: "";
display: inline-block;
width: 100%;
}
.div1 span img{
width:45%;
}
<div class="div1">
<span><img src="https://picsum.photos/189/324?random=1" alt="rd1"/></span>
<span><img src="https://picsum.photos/189/324?random=2" alt="rd2"/></span>
</div>
<div class="div2">
<img src="https://picsum.photos/380/325?random=3" alt="rd3"/>
</div>
My comment: I have set an 'img' width value to 45%, but you could set it to any value which will be equal or less than 50%. By the way, I suggest you to use tag 'span' instead of 'p' because 'span' ,in my opinion, is more suitable for this purpose. If you will use my approach you will be able to add any number of images to parent 'div' tag. For example, if you will add any number of images and their total width will be equal or less than 100%, these images are will be placed evenly on row.

Answer 2

This is what you asked for. But I recommend not to go with this approach. Extending it will be a nightmare. If image sizes change then it will be impossible to fix with with just CSS.
body {
width: 380px;
margin: 0 auto;
}
.div1{
position:relative;
height:324px;
}
.div1 p {
margin-bottom: 0;
margin-top: 0;
width:50%;
position:absolute;
}
.div1 p:first-child {
left:0px;
}
.div1 p:last-child {
left:50%;
}
<div class="div1">
<p><img src="http://lorempixel.com/189/324/" alt=""/></p>
<p><img src="http://lorempixel.com/189/324/" alt=""/></p>
</div>
<div class="div2">
<img src="http://lorempixel.com/380/325/" alt=""/>
</div>

Answer 3

you can use display: flex; like that you dont have to use float
body {
/* width: 520px;*/
margin: 0 auto;
}
/*.div1 p {
margin-bottom: 0;
margin-top: 0;
}*/
.div1 {
display:flex;
justify-content:center;
}
.div2{
display:flex;
justify-content:center;
}
<div class="div1">
<img src="http://lorempixel.com/189/324/" alt=""/>
<img src="http://lorempixel.com/189/324/" alt=""/>
</div>
<div class="div2">
<img src="http://lorempixel.com/380/325/" alt=""/>
</div>
you mean something like this?
.div1 {
left: 0;
right: 0;
text-align: center;
margin: auto;
}
.div2 {
left: 0;
right: 0;
text-align: center;
margin: auto;
}
<div class="div1">
<img src="http://lorempixel.com/189/324/" alt=""/>
<img src="http://lorempixel.com/189/324/" alt=""/>
</div>
<div class="div2">
<img src="http://lorempixel.com/380/325/" alt=""/>
</div>