Question

TL; DR版本：我需要3个these并排，以便在打开时基于百分比的宽度动画并且有足够的数据将其他人推到一边。

我的页面顶部有一个细长部分，必须保持可调整大小，因此其内容的宽度定义为百分比。在该部分中，我有3个元素（实际上它是3个面板示例的3列，因此3 * 3 = 9个可折叠面板，但据我所知，它可能只是任何其他div和大多数解决方案仍然可以正常工作），它们在点击时显示其内容的平滑动画高度。

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

为了方便起见，并且因为到目前为止还没有其他解决方案被证明更具功能性，所以将3 * 3面板分成三列，每组三个面板，每个面板都在一个不可见表中的单元格中：

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

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

所以，我尝试在打开面板的同时向侧面动画制作动画，我已经尝试动画表格单元格，我已经尝试将面板列放在div中我们尝试用水平移动面板内垂直打开的面板制作某种手风琴，我试图将整个布局换成其他面板系统，希望它可以更好地工作。

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

长话短说，我需要3个平行的3个可扩展面板，每个可扩展面板的尺寸平滑，并根据其内容的大小，具有百分比宽度和打开/关闭任意多个面板的能力任何时候（都是从关闭开始）。虽然我已经有一些可以工作的面板并使用一个简单的表格来制作它们3乘3，但它们向下动画但不是横向动画。

这个例子接近我需要的东西（我只想把它缩小到3 * 3无图像面板而不是5 * 6）：http://css-tricks.com/examples/InfoGrid/。它有一个面板网格，每当你打开它时，它会相应地改变所有其他面板的大小，但是，宽度是特定的，并以像素数量而不是百分比来定义，并且它似乎不支持打开任何无论我做什么，都可以同时获得所需数量的面板。

我愿意尝试您建议的任何方法，请记住;

必须是3×3向下扩展/可折叠面板，它们可以根据彼此显示的内容平滑地改变尺寸，并且可以彼此独立地打开/关闭
尺寸（或至少宽度）必须是基于百分比的，而不是固定的像素数
如果可能的话，它应该尽量少用带宽和文件大小，最好不要超过15kb

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

Answer 1

只是将它们放在一起所以它非常粗糙，并且是一个原型，但我认为它可能是你正在寻找的东西？

<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/

根据流体含量动画元素之间的差距

1 个答案: