Question

我创建了2列。第二个是240px宽，第一个是所有宽度。

以下显示IE8＆amp; FF3.6：

/*My Styles*/
div.table { display:table; border-collapse: collapse; table-layout:fixed; width:100%; border-spacing:0; padding:0; margin:0;}
div.cell  { display:table-cell; overflow:hidden;vertical-align:top;}


<div class="table">    
        <div class="cell" style="width:100%">
            <div id="tblWFWrap" class="tblWrap">
                <div id="tblWF" style="overflow:hidden">
                    <!--Content-->
                </div>
            </div>
        </div>

        <div id="wfCol" class="cell" style="width:240px;">
            <div id="ulWF" class="tblWrap" style="width:240px">
                <!--Content-->
            </div>
        </div>        
</div>

问题在于我希望将第二个单元格的宽度从240px设置为0.两个浏览器在动画期间都无法显示第二列。（它在屏幕上运行，好像表格布局是自动而不是固定的）

我一直在使用jQuery 1.4来制作动画，但如果这是jQuery中的一个错误，我会接受自定义编写的Javascript实现。

我的jQuery代码基本上是：

$("#wfCol").animate({ width: 0 });

我非常感谢任何动画这个东西的帮助：）

Answer 1

我相信我有一个解决方法。出于某种原因，动画maxWidth而不是宽度可以工作。

所以：

<div id="wfCol" class="cell" style="width:240px; max-width:240px">
        <div id="ulWF" class="tblWrap" style="width:240px">
            <%=DashboardController.GetWorkflowString()%>
        </div>
    </div>

和

$wfCol.animate({ maxWidth: 0 });

作品......很奇怪，但我会接受它：）

Answer 2

只需删除100％宽度声明，默认情况下<div>将展开为宽度，而不是提供您正在谈论的行为：

div.table { display:table; border-collapse: collapse; table-layout:fixed; border-spacing:0; padding:0; margin:0;}

动画div宽度样式为table-cell

2 个答案: