jquery - css/jquery - 如果不是，如何隐藏最后一行 float 元素

Question

我正在寻找一种快速简单的方法(在 css 或 jquery 中)来隐藏 float 元素的最后一行，如果它们不是偶数的话。

参见 JS fiddle :http://jsfiddle.net/cohhvfjn/

当你调整 html 容器的大小时，有时最后一行 float 元素可能有 3 个元素，而它上面的行有 4 个，当它进一步缩小时也是如此，所以当它上面的行有 2 个时，最后一行有 1 个元素.

基本上，只有当其中的元素数量与上面的行不匹配时，我才会尝试删除/隐藏最后一行。

有人可以帮我解决这个问题吗？

这是 jsfiddle 中包含的基本 html:

<style>
    .content {width:100%;}
    .content .block {float:left;width:20%}

    @media all and (max-width: 600px) {
        .content .block {width:25%}
    }
    @media all and (max-width: 500px) {
        .content .block {width:33.3%}
    }
    @media all and (max-width: 400px) {
        .content .block {width:50%}
    }
</style>
<div class="content">
    <div class="block">Text</div>
    <div class="block">Text</div>
    <div class="block">Text</div>
    <div class="block">Text</div>
    <div class="block">Text</div>
    <div class="block">Text</div>
    <div class="block">Text</div>
    <div class="block">Text</div>
    <div class="block">Text</div>
    <div class="block">Text</div>
    <div class="block">Text</div>
    <div class="block">Text</div>
    <div class="block">Text</div>
    <div class="block">Text</div>
    <div class="block">Text</div>
</div>

Answer 1

使用 nth-child 的组合和 nth-last-child() .

当你想要 4 个元素到一行时，你可以从第一个开始定位每第 4 个元素(所以 1、5、9，...)，这也是最后一个 child (意味着它是最后一行中的唯一元素) ，倒数第二个 child (最后一行只有 2 个元素)，或倒数第三个 child (最后一行只有 3 个元素)。

相同的概念适用于其他长度的行。 This article by Heydon Pickering在这种情况下非常有帮助。

注意:我更改了您的媒体查询以使我的演示更易于管理，并且还使用了 <ol>对元素进行编号以进行澄清。

<style>
    .content {width:100%;}
    .content .block {float:left;width:20%}

    @media all and (min-width: 501px) and (max-width: 600px) {
        /* 4 elements to a row */
        .content .block {width:25%}
      
        .content .block:nth-child(4n+1):nth-last-child(1),
        .content .block:nth-child(4n+1):nth-last-child(2),
        .content .block:nth-child(4n+1):nth-last-child(2) ~ .block,
        .content .block:nth-child(4n+1):nth-last-child(3),
        .content .block:nth-child(4n+1):nth-last-child(3) ~ .block {
            display: none;
        }
    }
    @media all and (min-width: 401px) and (max-width: 500px) {
        /* 3 elements to a row */
        .content .block {width:33.3%}
      
        .content .block:nth-child(3n+1):nth-last-child(1),
        .content .block:nth-child(3n+1):nth-last-child(2),
        .content .block:nth-child(3n+1):nth-last-child(2) ~ .block {
            display: none;
        }
    }
    @media all and (max-width: 400px) {
        /* 2 elements to a row */
        .content .block {width:50%}
      
        .content .block:nth-child(2n+1):last-child {
            display: none;
        }
    }
</style>
<ol class="content">
    <li class="block">Text</li>
    <li class="block">Text</li>
    <li class="block">Text</li>
    <li class="block">Text</li>
    <li class="block">Text</li>
    <li class="block">Text</li>
    <li class="block">Text</li>
    <li class="block">Text</li>
    <li class="block">Text</li>
    <li class="block">Text</li>
    <li class="block">Text</li>
    <li class="block">Text</li>
    <li class="block">Text</li>
    <li class="block">Text</li>
    <li class="block">Text</li>
</ol>