CSS动画移动表行

Question

我想做一个简单的画廊风格的页面，有一个图像，当你滚动到图像的潜水扩展显示一些细节。

下面是一个示例，显示我正在尝试做什么(以及我遇到的问题)。

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

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

我想实现的是潜水扩展，只移动它下面的潜水-而不是整个行。

我把它放在一个表中，只是为了保持所有div在顶部时悬停。我不能让div在同一行停留在顶部，仅仅用CSS。

有人能帮我移动只是潜水下面的一个悬停下来吗?(也不要对表格大惊小怪，所以如果只有CSS的解决方案可以工作，我会使用它)

提前谢谢你。

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

http://jsfiddle.net/rwilkin/tjskujcy/5/—1div with 6 images

问题是相同的，但也是，同一行的图像移动到行底部，而不是留在原地。

Answer 1

这是我的小提琴

我使用CSS3 flex-box模型，并认为它解决了当从顶部行的项展开时行向下的问题。虽然这里有一些问题(我不确定这些是否对你很好):

• 不使用表
• 布局是列式的，而不是按行
• 物品顺序从上到下再从左到右
• 容器高度必须固定(这样才会有列)

Answer 2

用了一点jquery，我得到了这个几乎是你想要的，有点hackish，但是ok:

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

看看这里的JSFiddle