將外部div的最小高度和寬度與內部div的大小進行比較

Question

我在div內有一個div。

外部div是可拖動的（jQuery），內部div是可調整大小的（jQuery）。

內部div中有一個跨度，其中填充了文本。

如何使外部div的高度和寬度永遠不小於其內容的高度和寬度？

目前，我可以將外部div調整為較小的尺寸，當文本從外部div溢出時外部div帶有邊框時，這是一個問題。

謝謝你的幫助

Answer 1

嘗試使用WithIn調整大小事件，1）獲取內部div的寬度。 並且，2）將外部div的最小寬度應用為（innerdiv + 4）..

因此，每當您調整大小時，都會觸發resize事件，因此，您需要獲取innerdiv寬度並將其externaldiv的“最小寬度”設置為略高於innerdiv。

希望這可以幫助..

.bind('resize', function(){
      var outer_width = parseInt($('.innerdiv').width() + 4);
         $('.outerwidth').width(outer_width);
   });

Answer 2

給出永遠不會變小的div的min-height和min-width。要確切的答案，您可以發布完整的html代碼。

Answer 3

將一些max-height和max-width應用於內部div。

如果您的外部div高度為300px，寬度為300px：

內部div CSS

max-height:300px;
max-width:300px;

Answer 4

如果您實際使用的是jQuery UI Resizable插件，則可以使用其自己的option參數 ：

$('.wrapper').resizable({
    minHeight: function() {
        $(this).contents().height();
    }
    ,minWidth: function() {
        $(this).contents().width();
    }
});

Answer 5

使用每個答案中的一點，這就是我解決的方法。

var spanminwidth=$('#span'+i).width();
spanminwidth=+spanminwidth+4;
$("#div"+i).css('min-width',spanminwidth);

var spanminheight=$('#span'+i).height();
spanminheight=+spanminheight+4;
$("#div"+i).css('min-height',spanminheight);

感謝所有的幫助