网格排列中的CSS滑出div

Question

我正在尝试创建一个“ block ”的“网格”，将鼠标悬停在其上方时会显示其下方的 div 中的一些文本。在这个例子中，我已经得到了我想要的一切，但是-有没有办法让它按照我的安排工作？

我想要的是只有底部的 div 在其上方的“展开”时下推(如示例中的左下角)。但显然我没有做对，因为它造成了巨大的差距并且它也没有显示动画。

不过，底部 div 在第二列中的 react 方式并不是我想要的。

有什么想法吗？

谢谢，感激不尽!

http://jsfiddle.net/nbFkZ/

Answer 1

通过你的评论，我想我终于明白了你的问题:

我做了什么:

1. 我已将第二个和第三个 li 移到新的 UL 元素中。
2. 让两个 UL 元素向左浮动。

HTML 有点太多了，所以我只发布 CSS:

ul.things {
    list-style: none;
    float: left;
    width: 240px;
}

ul.things li {
    display: inline-block;
    /*float:left;*/
    margin:15px;
}

HTML、CSS 和现场演示:http://jsfiddle.net/nbFkZ/4/

希望对您有所帮助:)