Question

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

所以：父母＆gt;扩大父母＆gt; 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>

Answer 1

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

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

Answer 2

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

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

2 个答案: