有什么方法可以判断浮动元素是否被撞倒了？

Question

想象一下响应式菜单，其中元素设置为浮动。他们都是150px宽。随着菜单宽度的减小，各个元素将逐个被撞到下一行。

您正在尝试确定元素是否已被降低。我的想法是以这样的方式设计东西，我可以找出浮动元素的顶部！= 0.如果没有，它会被撞到下一行。我还可以评估元素高度，以确定元素是否在第2,3行等。

是否有更简单的方法来确定浮动元素是否由于父宽度约束而被包裹/撞击？

Answer 1

我会尝试找到元素f.e的偏移量。这条路：

$(window).on('resize', function () {
    $(".some-menu-item-selector").each(function(e) {
       elementOffset = $(this).offset().top,
       $(this).html(elementOffset); 
    });
});

现在，当我有偏移量时，我可以按“行”对元素进行分组。只有一个假设：元素具有相同的高度。如果没有，事情会变得复杂。

Answer 2

由于你的元素是固定大小，150px，你可以简单地使用一些数学来计算它们在容器元素中的位置。

floor（容器宽度/元素宽度）=每行的元素数

元素索引每行元素％=列

floor（元素索引/每行元素）=行

只需为容器调整大小事件添加一个事件监听器，然后在那里进行检查。

Answer 3

这可能不是最好的方法，但它是使用javascript或jQuery的一种可能性。

您可以从第一个菜单项的顶部获取位置，然后检查下一个元素的距离。如果它们不同，你会知道该元素已被取代。

您必须在加载和更改窗口时执行此操作。

祝好运！

Answer 4

我知道JS很少但你可以检查身高。我正在使用一个菜单作为addClass或removeClass的示例。

但是：ぁzxswい

jQuery的：

https://jsbin.com/gapaqe/1/

CSS

$(window).on("resize", function() {

    if ($('nav').height() >= 62) {

        $('nav').addClass('test');

    } else {

        $('nav').removeClass('test');


    }

}).resize();

HTML

nav a {
    float: left;
    padding: 20px;
    border: 1px solid red;
}
.test a {
    background: blue
}
/* to clear the floats all fast like dude */
nav {
    display: table;
}