将div宽度设置为其子项的总和及其子项的宽度与其子项的总和

时间:2011-06-12 01:56:12

标签: javascript html

我正在尝试创建一个扩展整个窗口的div(可以水平滚动)并调整其子项的大小,这些都会调整为子项。

所以:父母>扩大父母> img儿童

这是基于帖子:jQuery - set div width to sum of it's children

这是为了最终创建一个水平图像布局,该布局将根据具有未定义图像数量的帖子水平延续。

Please see this link。目标是让图像在每个父级中保持浮动,并且每个父级都在主父级中浮动。

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>  

2 个答案:

答案 0 :(得分:1)

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

让你的图片浮动:左边完成这个

答案 1 :(得分:0)

您可以将 overflow:auto 添加到父级的 css