Question

我正在尝试在我的网站上添加一些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需要2秒钟才能移动到第一个div之下，它将在动画中发生，而不是仅仅出现在那里。

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

    -webkit-transition: all 1s linear;

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

任何想法？

谢谢你！

Answer 1

CSS Media Queries可以实现您想要的效果。

的演示

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

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