CSS 动画移动 table 行

Question

我正在尝试制作一个包含图像的简单图库样式页面，当您将鼠标悬停在图像上时，dive 会展开以显示一些细节。

这里 jsfiddle 展示了我正在尝试做的事情（以及我遇到的问题）。

[http://jsfiddle.net/tjskujcy/]

当鼠标悬停时，div 会像我想要的那样展开，但它会将其下方的整行向下移动。

我想要实现的是 dive 展开并仅将其下方的 divs 向下移动 - 而不是整行。

我把它放在 table 中只是为了在鼠标悬停时将所有 div 保持在顶部。我无法让同一行的 divs 保持在顶部，只有 CSS.

有谁能帮我把悬停下方的 div 移下来吗？ （也没有在 table 上大惊小怪，所以如果 CSS 唯一的解决方案可行，我会使用它）

提前谢谢你。

编辑：考虑到 KittMedia 的评论 - 我删除了 table。 http://jsfiddle.net/rwilkin/tjskujcy/4/ -- 有 2 divs，每个 'row'

三张图片

http://jsfiddle.net/rwilkin/tjskujcy/5/ -- 1 div 有 6 张图片

问题是一样的，但同一行上的图像移动到行的底部而不是原地不动。

Answer 1

有了一点点 jquery 我得到了这个 几乎 就像你想要的那样，有点老套但是还可以：

$("div#outer").mouseenter(function(){
    $(this).parent().attr("rowspan", "2");
});

看看JSFiddle here

Answer 2

这是我的fiddle。

我使用了 CSS3 flex-box 模型，并认为它解决了当顶行的项目展开时行下降的问题。虽然这里有一些问题（我不确定这些是否适合你）：

• 不使用表格
• 布局是柱状的，而不是按行排列的
• 项目顺序是从上到下然后从左到右
• 容器高度必须固定（这样列才会存在）

更多关于 CSS3 Flex-box here。