复杂对象的流动DIV

时间:2014-08-01 22:18:42

标签: css

我从this网站上解除了吃豆人和太空入侵者(以下统称为#34;对象"),我试图让他们一个接一个地直线流动(随机),但目前有跳跃。

在这种情况下,我如何包装每个对象(吃豆人或太空入侵者)并让它们流动?

这是我迄今为止所拥有的内容,以及每个对象上的float: left;http://codepen.io/anon/pen/ijraw (刷新以查看替代渲染)

这就是我想要的:

(所有DIV一个接一个地流动,一次流动一条线)

do

这是我不想要的:

在第2行看到唯一的红色太空入侵者?我不想要那个 - 我想要一条满满的东西。

dont

PS这里有太多代码要发布。 Pacman和Space Invader对象不是统一的,也不是任何相似的,这就是为什么我想知道是否有办法用更一致的东西包装它们。

1 个答案:

答案 0 :(得分:1)

浮动div将在DOM流中找到它们的位置。你的两张图片大小不同,所以浮动实际上是在做它的工作。

只需将float : left更改为display : inline-block即可。

enter image description here

http://codepen.io/anon/pen/uapkL