恢復未設置的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寬度

回答

相關問題