0

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

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

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

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

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

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

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

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

4

2 回答 2

3

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

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

$(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

于 2013-07-16T13:27:31.150 回答
1

inline-block您可以使用而不是浮动它们来显示子元素。不过，您将不得不摆脱烦人的空间，我在这里使用了负边距：

display:inline-block;
margin:0 -4px 1px 0;
vertical-align: top;

演示：http: //jsfiddle.net/Q4CFt/8/

于 2013-07-16T13:44:10.980 回答