Looking to create a visually appealing gallery layout with evenly spaced thumbnails that perfectly fit the width of their container? Check out this unique solution provided by Marcelo Amorim:
Distributing images evenly & horizontally in a Div via CSS
Here is the CSS solution he came up with:
#container {
text-align: justify;
}
.pic_bloc {
width: 130px;
height:160px;
display: inline-block;
vertical-align: top;
margin-bottom:30px;
}
.pic_bloc img{
width:130px;
height:160px;
}
#container:after {
content: "";
width: 100%;
display: inline-block;
}
Sample HTML structure:
<div id="container">
<div class="pic_bloc"><img src="1.jpg"/></div>
<div class="pic_bloc"><img src="2.jpg"/></div>
<div class="pic_bloc"><img src="3.jpg"/></div>
<div class="pic_bloc"><img src="4.jpg"/></div>
<div class="pic_bloc"><img src="5.jpg"/></div>
<div class="pic_bloc"><img src="6.jpg"/></div>
<div class="pic_bloc"><img src="7.jpg"/></div>
</div>
However, there's an issue where the last row of thumbnails may not align as expected when there are multiple rows. A solution is needed for achieving consistent alignment.
Are you looking for a way to maintain even spacing while ensuring the last row's thumbnails align to the left, creating a better gallery layout? Share your thoughts and suggestions on how this can be achieved using CSS or jQuery.