Set div width to sum of its children and its children's width to the sum of their children

I'm trying to create a div that expands the entire window (can scroll horizontally) and resize to its children, which all resize to their children.

So: Parent > Expanding Parents > img Children

This is based on post: jQuery - set div width to sum of it's children

This is to ultimately create a horizontal image layout that will continue horizontally based on posts with an undefined amount of images.

Please see this link. Goal is to have images float left in each parent and each parent float left within main parent.

JavaScript:

$(function(){
    $("#page-wrap").wrapInner("<table><tr>");
    $(".post").wrap("<td>");
});

$(function(){   
    var sum=0;
    $('.post img').each( function(){ sum += $(this).width(); });
    $('td > div').width( sum );
});

HTML:

<div id="page-wrap">    
    <div class="post">
        <img src="../newimages/ford_models_chris1.jpg"/>
        <img src="../newimages/ford_models_chris1.jpg"/>        
    </div>
<div class="post">
    <img src="../newimages/ford_models_chris1.jpg"/>        
</div>  开发者_开发问答

$('.post').each(function(){
  var width=0;
  $(this).find('img').each(function(){width+=$(this).width();})
  $(this).width(width+'px');
});

make your images float:left to complete this

you can add overflow:auto to the parent's css