恢复未设置的div宽度

我正在尝试动态创建div，我将其设置为width至650px，当我“缩小”它时，我想在切换动画时恢复其原生width。您可以看到我的animated_div，有容器的width，并且只有一个min-width集合。这是我的代码：恢复未设置的div宽度

HTML

<div id="container> 
<div class="animated_div> 
... 
<p>really a lot of text here</p> 
... 
</div> 
</div>

CSS

.animated_div{ 
padding:20px; 
min-width:650px; 
margin:0 auto; 
margin-bottom:15px; 
margin-top:10px; 
}

JQUERY

$("#toggle_click").on('click', function() { 
    $("#animated_div").animate({ 
    width : "650px" 
}) 

$("#toggle_click2").on('click', function() { 
    $("#animated_div").animate({ 
    width : "100%" // Here it is the problem , It set the div to be over-widthed. 
})

的问题，因为我在评论中写道，如果我设置100% div比容器获得更多的宽度。

来源

2013-03-07 steo

我相信你要找的东西是设置'width：auto'。你有一个显示问题的jsfiddle吗？ – 2013-03-07 20:26:32

我已经尝试使用自动，它不工作 – steo 2013-03-07 23:16:07

你可以简单地通过jQuery将宽度设置为“auto”。您的电话将如下所示：

$("#toggle_click2").on('click', function(){ 
    $('#animated_div').animate({ width:'auto'}); 
});

来源

2013-03-07 20:26:43

球员我尝试使用汽车，它不会恢复 – steo 2013-03-08 10:09:23

然后，我们需要看到一些更完整的CSS，因为汽车应该留给浏览器来呈现任何适合它如何显示。如果它绝对定位，它应该换行以填充内容。如果它是静态的，它应该填充它的容器宽度等。 – 2013-03-08 14:25:22

100％宽度+ 20px的填充将使您的div比您的容器宽40px。

尝试，而不是你的宽度设置为100％，设置宽度回继承：

$("#toggle_click2").on('click', function() { 
    $("#animated_div").animate({ 
      width : "auto" 
    }); 
});

另外，不要忘记关闭括号和分号。

来源

2013-03-07 20:33:17 BinaryTox1n

恢复未设置的div宽度

回答

相关问题