Question

我遇到了将高度与三列（div-elements）同步的问题。其中一列是主要内容容器。但是我在主内容容器中有一些动画，所以我希望在动画期间和之后将高度与其他两列同步。动画是CSS 3 webkit-transition动画。并且动画不会出现在列本身中，而是出现在主要内容容器的内容中。我已尝试使用表格并将列的div高度设置为100％。事情是在动画后同步列。我也尝试过使用Jquery但没有成功，同样存在问题。

最后我要澄清一下。我希望它们在动画期间同步，而不是在之后！

任何人都可以在不必一直调用函数的情况下提供解决方案，例如syncColumnHeight（）; //获取主内容容器的列高并将其插入其他两列，这将是很好的。

更新：以table元素开头的html代码：

<table>
    <tr>
        <td>
            <div id='leftColumn'></div>//I want this to sync with the height of the mainContentColumn
        </td>
        <td>
            <div id='mainContentColumn'></div>//All the animation is occuring here
        </td>
        <td>
            <div id='rightColumn'></div>//I want this to sync with the height of the mainContentColumn
        </td>
    </tr>
</table>

Answer 1

如果不查看CSS，这有点难以解决，但我猜div有列样式，而tds是需要它的。

http://jsfiddle.net/duopixel/weG8P/

所以，在代码中：

table td {
  /*Apply column styles such as background-color here*/
  -webkit-transition: all 1s ease;
}

在动画状态期间同步div高度

1 个答案: