在td可調整大小內製作div

Question

我在td元素中有div。該div可調整大小，並有溢出滾動。問題在於，當我使用JQuery更改div的內容時，div調整大小。我想要的是當div的內容改變時它保持相同的大小。有人能告訴我如何做到這一點？

<table> 
    <tr> 
    <td style="text-align: right">Date: 8-29-2013</td> 
    <td></td> 
    </tr> 
    <tr> 
    <td><div id="mydiv" style="border: 1px solid black; overflow:scroll; resize: both; min-height:300px;min-width: 300px;"></div></td> 
    <td style="vertical-align: top"><button id="edit">Edit</button></td> 
    </tr> 
</table> 

<script> 
    $('#edit').click(function(){ 
    $('#mydiv').html('A lot of text to demonstrate how the div resizes when I don\'t want it to.'); 
    }); 
</script> 

Answer 1

您需要將寬度設置爲父元素，即table或您不希望增加寬度的子元素。即，div。

我向父元素添加了寬度，以便所有的子元素都可以用它來控制。

CODE：根據您的要求變化幅度：

#table{ 
    width:165px; 
} 

<table id="table"> 
    <tr> 
    <td style="text-align: right">Date: 8-29-2013</td> 
    <td></td> 
    </tr> 
    <tr> 
    <td><div id="mydiv" style="border: 1px solid black; overflow:scroll; resize: both;min-height: 300px;"></div></td> 
    <td style="vertical-align: top"><button id="edit">Edit</button></td> 
    </tr> 
</table> 


$('#edit').click(function(){ 
    $('#mydiv').html('A lot of text to demonstrate how the div resizes when I don\'t want it to.'); 
    }); 

JSFIDDLE

注意。

Answer 2

也許是因爲你有2 min-height s。您需要max-height

Answer 3

您需要的寬度添加到div

<div id="mydiv" style="border: 1px solid black; overflow:scroll; 
    resize: both; width:300px min-height:300px;"></div>