Currently, I am facing a challenge while creating an HTML page to display posts consisting of images of varying heights. The requirement is to ensure that all image widths are the same while their heights differ. Specifically, when the top post image has a smaller height, the lower post image should automatically move up to fill in the empty space. To get a clearer picture, please refer to the images linked below:
Current Layout
(Please visit the links to view the images)
https://i.sstatic.net/An2ca.png
Desired Layout
https://i.sstatic.net/dQzFH.png
I hope this visually clarifies my requirements.
Below is the CSS code snippet I have been using:
.posts{
width:80%;
max-width:951px;
min-height:990px;
border:0px solid black;
float:right;
margin-left:10px;
}
.post{
width:300px;
min-height:100px;
float:left;
margin-left:10px;
margin-top:10px;
border:0px solid green;
vertical-align:text-top !important;
}
.post img{
width:100%;
max-width:290px;
height:auto;
transition:all 1s ease;
opacity:1.0;
}
.post img:hover{
opacity:0.7;
}