Question

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

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

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

Answer 1

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

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

每行的元素索引％元素=列

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

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

Answer 2

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

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

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

Answer 3

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

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

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

祝你好运！

Answer 4

我知道JS很少，但你可以检查身高。我使用一个示例菜单来添加类或删除类。

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

<强> jQuery的：

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

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

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

    } else {

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


    }

}).resize();

<强> CSS

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;
}

<强> HTML

<nav>
    <a href="#">Link 1</a>
    <a href="#">Link 2</a>
    <a href="#">Link 3</a>
    <a href="#">Link 4</a>
    <a href="#">Link 5</a>
    <a href="#">Link 6</a>
    <a href="#">Link 7</a>
    <a href="#">Link 8</a>
    <a href="#">Link 9</a>
  </nav>

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

4 个答案:

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