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

您需要将宽度添加到div

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

Answer 3

也许是因为你有2 min-height s。您需要max-height

在td内调整div可调整大小

3 个答案: