Question

我正在尝试创建一个包含图像的简单图库样式页面，当您翻转图像时，潜水会展开以显示一些细节。

这是jsfiddle来显示我想要做的事情（以及我遇到的问题）。

int main ( void )
{
    struct callback_params *params = some_func();
    while (params->lib_sum < 100)
        printf("Waiting for something: %d%%\r", params->lib_sum);
    puts("Done!");
    free(params);//free the memory, we're done with it
    //do other stuff
    return 0;
}

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

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

我把它放在一张桌子里，只是为了让所有的div在悬停时保持在顶部。我无法让同一行的div只用CSS保持在顶部。

是否有人能够帮我移动悬停下方的div？（也没有在桌面上讨好，所以如果只有CSS解决方案可以使用它我将使用它）

提前谢谢。

编辑：将KittMedia的评论记入帐户 - 我删除了表格。 http://jsfiddle.net/rwilkin/tjskujcy/4/ - 有两个div，每个'row'中有三个图像

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

问题是相同的，但是同一行上的图像移动到行的底部而不是保持放置。

Answer 1

这是我的fiddle。

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

不使用表格
布局是柱状而不是行
项目顺序是从上到下，然后从左到右
必须修复容器高度（以便列存在）

有关CSS3 Flex-box here的更多信息。

Answer 2

通过一点点jquery，我得到了几乎就像你想要的那样，有点hackish但是没问题：

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

查看JSFiddle here

CSS动画移动表格行

2 个答案: