javascript - 投资组合扩展器宽度 - Jquery CSS

Question

我一直在努力改变我的投资组合的外观，并且我一直在努力让我的扩展器将元素下推(就像谷歌图片所做的那样)。

我的测试在这里:http://chris-carpenter.co.uk/new/

我以此为起点为我的工作添加了一个可过滤的选项:queness.com/post/14577/create-a-simple-responsive-portfolio-page-with-filtering-and-hover-effect

这就是导致问题的原因。我找到了创建可过滤投资组合的方法，以及创建具有扩展内容部分的静态投资组合的方法，但将它们结合起来让我大吃一惊。我似乎无法弄清楚。

目前这会打开并向下插入元素，但宽度受到父 div 的限制，因此下方和右侧的任何内容似乎都不会移动。

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

我现在正在考虑在单击的行末尾插入一个内容 div。很像这样。

http://jsfiddle.net/JfcAu/450/

我对 JS 的经验不足，无法理解正在发生的事情并将其应用于我所拥有的。谁能帮我实现一个可点击展开选项的可过滤网格？当然，我不希望保留任何当前的样式，因为我还没有从原始来源更改它，我只希望该功能正常工作。

多年来，这一直在伤害我的大脑。我看过的有用的东西:

同位素.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 */
}

有一个 float:left - 将它从 DOM 中取出 - 你必须删除 float:left - 然后将宽度调整为 22% 或其他东西，让扩展的内容将所有内容推开。