css - 根据元素的流体内容为元素之间的间隙设置动画

Question

TL；DR 版本:我需要 these 中的 3 个并排的方式，当一个人打开并有足够的数据将其他人推到一边时，它们基于百分比的宽度会产生动画。

我的页面顶部有一个纤细的部分，它必须保持可调整大小，因此其内容的所有宽度都定义为百分比。在该部分中，我有 3 个元素(实际上它是面板示例的 3 列，每列 3 个，因此 3*3=9 可折叠面板，但据我所知，它也可能只是任何其他 div 并且大多数解决方案仍然有效相同)在单击以显示其内容时具有平滑的动画高度。

此外，当面板打开时，所有面板的宽度变得适合所有面板显示的内容，相应地更改每个面板可用的空白空间的大小，原因如下:

为方便起见，并且由于迄今为止还没有其他解决方案被证明更有效，因此 3*3 面板被分为三列，每列三个面板，每个面板位于一个不可见表格中的一个单元格中，如下所示:

<table>
<tr><td> [3PanelColA] </td><td> [3PanelColB] </td><td> [3PanelColC] </td><tr>
</table>

换句话说，这很好用。每当您单击 9 个面板中的任何一个时，它都会向下平滑打开，并且所有面板(表格单元格)的宽度都会根据显示的打开面板中的内容量完美调整大小，同时可以随时调整所有内容的大小根据顶部的大小(或调整浏览器窗口的大小)。只有一个问题:在当前阶段，面板在正确打开并根据其适当的百分比宽度时，会平滑地向下动画，但它们的宽度只是卡入到位!

因此，我尝试在面板打开时将面板向侧面设置动画，同时向下设置动画，我尝试为表格单元格设置动画，我尝试将面板列放在中间有动画间隙的 div 中，我已经尝试使用水平移动面板内部的垂直打开面板制作某种 Accordion ，我尝试将整个布局换成其他面板系统，希望它可以更好地工作。

我浏览并修改了无数的网格系统，试图制作一些允许打开面板的东西，整个网格相应地垂直和水平改变大小，所有这些只是为了使面板列之间的空间平滑移动而不是卡入到位。

长话短说，我需要 3 个平行列，每列 3 个可扩展面板，它们的大小根据内容的大小平滑地动画，具有百分比宽度，并且能够随时打开/关闭任意数量的面板(所有开始都是关闭的)。虽然我已经有一些可以工作的面板并使用一个简单的表格将它们制成 3 x 3，但它们的动画是向下而不是侧向的。

这里的这个例子接近我所需要的(我只是把它削减到 3*3 的无图像面板而不是 5*6):http://css-tricks.com/examples/InfoGrid/ .它有一个面板网格，每当您打开一个面板时，它都会相应地更改所有其他面板的大小，但是，宽度是特定的，并且以像素数量而不是百分比来定义，并且它似乎不支持打开任何所需的数量无论我对它做什么，面板同时进行。

我愿意尝试您可能建议的任何方法，请记住这一点；

它必须是 3 x 3 向下扩展/可折叠的面板，它们都可以根据彼此显示的内容平滑地改变大小，并且可以彼此独立地打开/关闭

大小(或至少宽度)必须基于百分比，而不是固定数量的像素

如果可能，它应该使用尽可能少的带宽和文件大小，最好不超过 15kb

解决方案可能很简单，例如在打开面板时为表格单元格宽度设置动画，或者将面板列放在某种 div/元素中，当面板打开时，其宽度/间隙会动画，或者使用全新的面板网格系统或一些这样的。

Answer 1

只是把它放在一起，所以它很粗糙，而且是一个原型(prototype)，但我认为它可能是你要找的东西？

<div class="wrap">
     <div class="row">
         <div></div>
         <div></div>
         <div></div>               
     </div>
     <div class="row">
         <div></div>
         <div></div>
         <div></div>               
     </div>
     <div class="row">
         <div></div>
         <div></div>
         <div></div>               
     </div>
</div>

其余的见@ http://jsfiddle.net/axv7T/