当内联块 div 因页面大小调整而更改位置时创建过渡

我正在尝试向我的网站添加一些css3设计。

我有两个div元素，它们使用以下 css 类定位：

.formDiv {
   vertical-align:top;
   padding-left:10px;
   display:inline-block;
}

使用以下测试代码：

 <body>
    <div class="formDiv">TestA</div>
    <div class="formDiv">TestB</Div>
    ...

但是使用此代码，两个div 都显示在同一行的同一 X 轴上。

当我在 x 轴上调整浏览器大小直到两个div 都没有空间时，第二个div 会降低到第一个div 下方。

我的问题是，我可以配置第二个div移动到第一个div以下的移动将在过渡动画中吗？

例如，我想配置如果我调整浏览器窗口的大小，第二个div 移动到第一个div 下方需要 2 秒钟，它将发生在动画中，而不仅仅是出现在那里。

我尝试将以下内容添加到div 类中

    -webkit-transition: all 1s linear;

但它似乎没有完成这项工作。

有什么想法吗？

谢谢！

您想要的效果可以通过 CSS 媒体查询来实现。

在这里，http://css-tricks.com/css-media-queries/

这是上面链接中的演示，http://css-tricks.com/examples/MediaQueriesSidebar/

尝试调整窗口大小，并在"超级团队"列表中查看更改。您可以使用它来创建所需的效果。

媒体查询和响应式网页设计的更多示例。调整大小并查看它如何适应窗口大小。

http://designshack.net/articles/css/20-amazing-examples-of-using-media-queries-for-responsive-web-design/

看到这个，http://jsfiddle.net/Mke7E/

相关内容