html - 当内联块 div 由于页面调整大小而改变位置时创建过渡

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;

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

有任何想法吗？

谢谢你！

score 3 · Accepted Answer

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

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

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

1 回答 1