JSFiddle - React, Tailwind, and code Playground

by iamthestig

HTML

<div id="main">
    <div><img src="#" /></div>
    <div><img src="#" /></div>
    <div><img src="#" /></div>
</div>

JavaScript

function() {
        var window_width = jQuery(window).width(),
            container = jQuery('#main'),
            page_width = 0;

        // Grab every child element of the "main" container
        container.children().each(function(index){
            var incl_margin = true,
                $this = jQuery(this);

            // Check if each child element has a margin-left or margin-right
            if ( parseInt($this.css('margin-left')) < 0 || parseInt($this.css('margin-right')) < 0 ) {
                var incl_margin = false;
            }

            // Get element's width including margins (if they exist from above)
            var width = $this.outerWidth(incl_margin);
            page_width += width;

        });

        // Add total width of containers elements as the containers width
        if(page_width > 0)
            container.css({'width' : page_width + 'px'});
    }
}