I have the following html code:
<style>
img {
width:33.3333333%;
float:left;
}
</style>
<img src="https://via.placeholder.com/500/FF0000?text=1">
<img src="https://via.placeholder.com/500x700/0000FF?text=2">
<img src="https://via.placeholder.com/500x600/008000?text=3">
<div style="clear:left;"></div>
<img src="https://via.placeholder.com/500/FFFF00?text=4">
<img src="https://via.placeholder.com/500/808000?text=5">
<img src="https://via.placeholder.com/500/00FFFF?text=6">
<div style="clear:left;"></div>
As you can see, there's a space between image 1
and image 4
as well as between image 3
and image 6
.
I want to reach that there's no space between the images that are below each other, by pushing each image up to the image above, but without cutting the images in height.
How can I do that?