当其他项目已被隐藏时，我如何使事情向上移动？

Question

当我隐藏其他对象时，我试图让事情向上移动，但现在只有一个空的 space 隐藏项目所在的位置。提前致谢！此外，here's a plunker 页面本身。

CSS:

#filters {
top: 10;
left: 0;
height: 50px;
width: 100%;
position: fixed !important;
z-index: 999999;
text-align:center;
}

#filters a:visited {
color:#ffffff;
text-transform:uppercase;
font-style:italic;
background:#6fc8de;
padding:3px 10px 3px 10px;
margin-left:3px;
margin-right:3px;
text-decoration:none;
letter-spacing:1px;
}

#filters a:hover {
color:#6fc8de;
background:#202020;
}

Javascript:

<script>
$(document).ready(function() {
  $('filters').click(function(e) {
    e.preventDefault();
    console.log('not: ',$(".media").not("." + $(this).attr("rel")));
    $(".media").not("." + $(this).attr("rel")).hide();
    $("." + $(this).attr("rel")).show(500);
  });
});
</script>

HTML

    <span class="media filtera"><div id="characterbox">
</div></span>
    <span class="media filterb"><div id="characterbox">
 </div></span>
    <div id="topbar">
    <div class="topbartitle">The Characters</div>
    <a class="topbarnavi" href="/">Home</a>
    <a class="topbarnavi" href="/message">Request</a>
    <a class="topbarnavi" href="/verses">Verses</a>
    <br><br>
    <div class="links">
    <div id="filters">
    <a href="#" rel="media" class="filters">All</a>
    <a href="#" rel="filtera" class="filters">Filter A</a>
    <a href="#" rel="filterb" class="filters">Filter B</a>
    </div></div></div>

我试图将 html 分解为尽可能少的信息。

Answer 1

将隐藏元素的高度设置为 0 应该会向上缩小所有元素。我通常这样做而不是尽可能隐藏元素。

当其他项目已被隐藏时，我如何使事情向上移动？

How do I make things move up in line when other items have been hidden?

css

jquery

visibility

filter

show-hide