Question

我一直在玩改变我的投资组合的外观，我一直在努力让我的扩展器向下推动元素（比如google图像）。

我已经将此作为为我的工作添加可过滤选项的起点： queness.com/post/14577/create-a-simple-responsive-portfolio-page-with-filtering-and-hover-effect

这就是造成问题的原因。我已经找到了创建可过滤组合的方法，以及创建具有扩展内容部分但是将它们组合在一起的静态组合的方法让我大吃一惊。我似乎无法弄明白。

此时打开并向下推动元素，但宽度受父div限制，因此任何低于＆amp;右边似乎没有转变。

<div class="portfolio--expand is-expanded">
  <a href="#close-jump-1" class="expand__close"></a>
</div>

我现在正在查看在单击行的末尾插入内容div。很像这样。

我没有足够的经验与JS了解正在发生的事情，并将其应用于我所拥有的。任何人都可以帮我实现一个可点击扩展选项的可过滤网格吗？我不希望保留任何当前的样式，因为我还没有从原始来源改变它，我只是希望功能正常工作。

这已经伤害了我的大脑多年。我看过的有用的东西：

isotope.metafizzy.co/filtering.html

oriongunning.com/blog/thumbnail-grid-expanding-preview/

Answer 1

你可能需要做一些宽度调整，但是这个：

#portfoliolist .portfolio {
box-sizing: border-box;
width: 23%;
margin: 1%;
display: none;
float: left;  /* <-- this is taking it out of the DOM */
}

有一个浮动：左 - 它将它从DOM中取出 - 你必须删除浮动：左 - 然后将宽度调整到22％或者某些东西让扩展内容将所有东西都推开。