即使以百分比定义，也会折叠隐藏其内容的DIV

我正试图获得一个可能在点击时崩溃的DIV。 对于这个简单的示例 ，单击将直接在整个DIV上触发。

 #fixed { width: 200px; } #fixed input { width: 180px; } .short_fixed { width: 50px !important; } 

 $('#fixed').click(function(){ $(this).toggleClass('short_fixed'); }); 

我的例子显示了2种情况：第一种使用“固定”宽度对象，而第二种使用“百分比”宽度。

单击时，首先DIV截断而不调整其内容大小，导致隐藏溢出内容，但它需要具有基于px的宽度，这是不太理想的

相反，第二个根据容器的宽度调整内容，它允许我使用％，但不会像我想的那样在崩溃时使用内容。

所以，我想设置内容宽度为容器宽度的百分比（也可能有％宽度），如第二个例子中所示，但是在容器折叠的情况下具有第一个行为。

Answer 1

加

 #variable input { width:100%; min-width: 180px;} 

到你的CSS，所以它将保持百分比，但内容将隐藏在崩溃

在这里看演示

Answer 2

使用切换function在display: block和display: none切换似乎是最好的选择