JSFiddle - React, Tailwind, and code Playground

by ajthomascouk

HTML

<div id="coolio">
    <div class="album">
        <img src="http://www.qtrax.net.au/wp-content/uploads/2010/07/worst-album-cover-ken.jpg" />
        <div>Album Title</div>
        <div>Artist</div>
    </div>
    <div class="album">
        <img src="http://www.qtrax.net.au/wp-content/uploads/2010/07/worst-album-cover-ken.jpg" />
        <div>Album Title</div>
        <div>Artist</div>
    </div>
    <div class="album">
        <img src="http://www.qtrax.net.au/wp-content/uploads/2010/07/worst-album-cover-ken.jpg" />
        <div>Album Title</div>
        <div>Artist</div>
    </div>
    <div class="album">
        <img src="http://www.qtrax.net.au/wp-content/uploads/2010/07/worst-album-cover-ken.jpg" />
        <div>Album Title</div>
        <div>Artist</div>
    </div>
</div>

CSS

.album{width:150px; float:left;}
.album img{width:100%;}

JavaScript

$(window).resize(function() {
    var thewidth = 0;
    $('.album').each(function(){
       thewidth = thewidth +  $(this).width();
    });
    var numberofdivs = $('#coolio').width() / $('.album').width();
    numberofdivs = Math.floor(numberofdivs).toFixed(0)
    if (numberofdivs >= $('.album').size()){
        numberofdivs = $('.album').size();
    };
    var widthleft = $('#coolio').width() - ($('.album').width() * numberofdivs);
    var margin = (widthleft / numberofdivs) / 2;
    $('.album').attr('style', 'margin-left:'+margin+'px; margin-right:'+margin+'px');
});