Question

我会尝试制作一个元素浮动列表并在下一个新行清除它们，因为框的高度未知，我们可以隐藏框以按类别突出显示，如：

＆＃13;

$('nav a').on('click', function(e) {
    e.preventDefault();
    var show = $(this).data('show');
    if(show == 'all') {
        $('div').show();
    } else {
        $('div').hide();
        $('.' + show).show();
    }
});

＆＃13;

* {
    box-sizing: border-box;
    margin: 0;
    padding: 0;
}
article {
    width: 400px;
}
div {
    width: 100px;
    border: 1px solid black;
    float: left;
    padding: 10px;
    margin-bottom: 10px;
}
.category-b {
    background-color: #eee;
}
div:nth-child(4n+5) {
    clear: both;
}

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<nav>
    <a data-show="all" href="#">All</a> /
    <a data-show="category-a" href="#">Category A</a> /
    <a data-show="category-b" href="#">Category B</a>
</nav>
<article>
    <div class="category-b">hello</div>
    <div class="category-a">hello world folk</div>
    <div class="category-a">lorem ipsum dolores</div>
    <div class="category-a">bonjour Mr</div>
    <div class="category-b">Katarina vs Alistar</div>
    <div class="category-a">hello</div>
    <div class="category-a">hello world folk</div>
    <div class="category-b">lorem ipsum dolores</div>
    <div class="category-b">bonjour Mr</div>
    <div class="category-a">Katarina vs Alistar</div>
    <div class="category-b">hello</div>
    <div class="category-b">hello world folk</div>
    <div class="category-b">lorem ipsum dolores</div>
    <div class="category-a">bonjour Mr</div>
    <div class="category-a">Katarina vs Alistar</div>
    <div class="category-a">hello</div>
    <div class="category-b">hello world folk</div>
    <div class="category-b">lorem ipsum dolores</div>
    <div class="category-a">bonjour Mr</div>
    <div class="category-b">Katarina vs Alistar</div>
</article>

＆＃13;

http://jsfiddle.net/Pik_at/Lwyte7sm/

问题是，当您选择一个类别时，第n个孩子也会通过display：none考虑隐藏的框并打破马赛克。有人会有解决方案吗？ Css解决方案将不胜感激。

Answer 1

最快的CSS解决方案：

为每个DIV设置一个固定的高度，然后向左浮动而不清除：两者。

div { height:80px; }

DEMO

或者，您可以使用jquery获取所有DIV的最高高度，并向左浮动以获得相同的结果。

/ =========================================== ========= /

如何使用display：inline-block;而不是浮动：左; ？

<强> DEMO 2

*宽度％可能需要减少为display：inline-block;在DIV之间产生一些空间。

结合float和nth-child明确行为和动态隐藏框

1 个答案: