javascript - 从一组 float 元素中计算出行中的最后一个 div

Question

我有一个包含多个子元素的父元素。

这些子元素是 float 的，并且可以是彼此不同的宽度和高度。我事先不知道有多少元素或它们的尺寸。

在视觉上，我希望它们在父容器中显示为行。但是，由于它们是 float 的并且宽度/高度各不相同，我怎样才能确保清除相关元素？

如果我使用 jQuery 计算每一行的最后一个元素，我可以在每一行之后插入一个清除 div，以获得我需要的可视行。

如何算出每一行的最后一个元素？

作为问题和理想解决方案的示例: jsFiddle

但是我没有插入那个 <div class="clear"></div> 的奢侈在源标记中，如何计算行中的最后一个 div 并动态插入它？

注意我不想在 childElements 上设置任何最小高度。

Answer 1

也许不是最好的解决方案，但适合您现有的解决方案。

我整理了一些 jQuery，它只是检查以确保子元素的宽度不超过父元素的宽度。

$(function(){

    var maxWidth = $('.parentElement').outerWidth();
    var rollingWidth = 0;

    $('.childElement').each(function(index, item){

        // updated to cache jQuery item.
        var $item = $(item);

        rollingWidth += $item.outerWidth();

        if( rollingWidth > maxWidth){
            $item.css('clear','left');
            rollingWidth = $item.outerWidth();
        }

    });

});

查看 jsfiddle