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>
    <!-- UNCOMMENT ME
    <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

#coolio{width:640px; outline:1px solid red; height:200px;}
.album{width:150px; float:left;}
.album img{width:100%;}

JavaScript

var thewidth = 0;
$('.album').each(function(){
   thewidth = thewidth +  $(this).width();
});

var widthleft = $("#coolio").width() - thewidth;


var margin = (widthleft / $('.album').size()) / 2;

$('.album').attr('style', 'margin-left:'+margin+'px; margin-right:'+margin+'px');