html - CSS动画移动表格行

Question

我正在尝试制作一个简单的画廊风格页面，其中包含一张图片，当您将鼠标悬停在图片上时，潜水会展开以显示一些细节。

这是一个jsfiddle展示我正在尝试做的事情(以及我遇到的问题)。

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

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

我想要实现的是扩展的下潜，并且只将其下方的 div 向下移动 - 而不是整行。

我将其放在表格中只是为了在鼠标悬停时将所有 div 保持在顶部。我无法仅使用 CSS 使同一行上的 div 保持在顶部。

有谁能帮我把悬停的下面的 div 向下移动吗？ (也没有在 table 上大惊小怪，所以如果只有 CSS 的解决方案可行，我会使用它)

提前谢谢你。

编辑:考虑到 KittMedia 的评论 - 我删除了表格。 http://jsfiddle.net/rwilkin/tjskujcy/4/ -- 有 2 个 div，每个“行”中有三个图像

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

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

Answer 1

这是我的 fiddle .

我使用了 CSS3 flex-box 模型，并认为它解决了当顶行的元素展开时行下降的问题。虽然这里有一些问题(我不确定这些是否适合您):

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

关于 CSS3 Flex-box 的更多信息 here .