1

我在构建我的在线设计作品集时遇到了这个问题。这对我来说似乎很复杂，但我知道有办法做到这一点，所以我对找不到解决方案感到沮丧。请帮忙！

我的设计要求使用媒体查询来优化我的移动设备、平板电脑和台式机/笔记本电脑的网站。移动版只有一列缩略图。单击每个缩略图时，通过 jQuery slideToggle 在其下方显示一个隐藏的 div，向下推其他项目缩略图。

这就是移动版本的工作方式，而且效果很好。问题是平板电脑和桌面/笔记本电脑版本。对于那些版本，我希望缩略图以网格模式显示。平板电脑上两个并排，台式机/笔记本电脑上三个并排，所有版本都有无限行。我可以使它们显示在带有 HTML 的网格中，但是当单击缩略图并通过 slideToggle 显示其下方的 div 时，问题就出现了。由于我使用的是媒体查询，因此 HTML 的顺序仍然与移动版本相同，隐藏的 div 位于代码中每个缩略图的正下方。因此，显示隐藏的 div 会下推所有其他缩略图，包括与正在单击的缩略图在同一行中的缩略图（如果它们在代码中位于该缩略图之后）。每行中的最后一个 div 执行我想要的操作；当隐藏的 div 显示时，下一行被推下。我希望隐藏的 div 显示在它所在的行下方，并按下下面行中的缩略图。

显然，如果可能的话，我想坚持使用媒体查询来避免创建单独的 HTML。

为缩略图和隐藏的 div 重复 HTML：

<div class="body">
    <div class="thumb"></div>
    <div class="projectWrapper"></div>
    <div class="thumb"></div>
    <div class="projectWrapper"></div>
    <div class="thumb"></div>
    <div class="projectWrapper"></div>
    <div class="thumb"></div>
    <div class="projectWrapper"></div>
    <div class="thumb"></div>
</div>

我创建了一个 jsfiddle 来演示这个问题：http: //jsfiddle.net/EuHyc/13/

请注意，使用 jQuery 隐藏 div。用 CSS 隐藏它们不允许隐藏 div 中的内容在显示时正确显示。另外，我不得不使用 display:inline-block 因为 float:left 不会强制隐藏的 div 在布局中出现在它的下方。

我希望我充分解释了这个问题。提前感谢您的帮助！我由衷的感谢！

4

0 回答 0