防止javascript/jquery添加的div流出父div

这件事已经困扰了我好几天了，我肯定我错过了一些简单的事情，但我一辈子都搞不清楚它是什么

我已经尝试了我在上找到的一些选项，例如overflow:auto；或溢出：滚动；将其更改为表格单元格列等

附件是它的外观和我不希望它的外观的图像，左侧较长的列是可变的，取决于他们从上一页中选择的用户，因此我不能在空白部分设置预定义的宽度，也不能使用计数器限制用户添加自定义价格时添加的列数

最后但并非最不重要的是jquery/javascript代码

$("#AddCustomPrice").click(function(e) {
    e.preventDefault()
        $( "#dialog-message" ).dialog({
      modal: false,
      buttons: {
        "Add Price": function() {
                    var Term        = $("#CustomTerm").val()
                    var Price       = $("#CustomPrice").val()
                    var CurrRate    = $("#CurrentRateHidden").attr('data-id')
                    var Volume      = $("#VolumeHidden").attr('data-id')
                    var CurrentCost = '<?=$currentcost?>'
                    // $currentcost - $pricingarr['term36'] * $volume2
                    var Saving      = CurrentCost - Price * Volume
                    var AnnualCost  = Price * Volume
                    console.log(Price)
                    console.log(Price * Volume)
                    $(".resultswrapper").append(
          '<div class="termwrapper2">'
          +'  <div style="margin-top:-25px; margin-left:-16px; padding:5px; position:absolute; display: table-cell; vertical-align: bottom;">'
          +'    <img src="http://cdn2.bigcommerce.com/server400/26074/products/235/images/383/custom_quote_10041.1367332284.1280.1280_29641.1369264683.1280.1280__59812.1369264887.1280.1280.jpg" style="max-width:96px; max-height:45px; vertical-align:bottom; margin:auto auto; bottom:0; display: block; position: absolute;" />'
          +'  </div>'
          +'<div style="float:left; display: block; clear: both;">'
          +'  <div class="termprice"><div style="margin-top:0px; line-height:0;"><strong>'+Term+' Months</strong></div>'+Price+'</div>'
          +'  <div class="termcost">'+AnnualCost.toFixed(2)+'</div>'
          +'  <div class="termsaving">'+Saving.toFixed(2)+'</div>'
          +'  <div class="nodal"></div>'
          +'  <div class="swing"></div>'
          +'  <div class="termsaving"> </div>'
          +'</div>'
          +'</div>'
          )
          $( this ).dialog( "close" );
        }
      }
    });
  });

---

等待快速反应

嘿，罗伯特！div是如何附加到页面的？如果您在注释上方查找：$.resultswrapper.append，您会看到它…您能在JSFIDLE中重新创建它吗？有一件事让我大吃一惊，那就是在包装纸上的绝对位置。。可能位置：相对溢出：滚动；行吗？一个JSFIDLE会更好。另外，使用float:left，您会像这样自找麻烦；我不知道是否可以重新创建它，因为我让PHP在数组中循环并插入上面显示的div示例，而不是使用float:left；你有什么建议？我把它改为相对和溢出：滚动；但是它切到了顶部的一部分..糟糕，我一定错过了最后一段完整的代码。。很抱歉

.termwrapper {
  -webkit-border-radius: 20px 20px 20px 20px;
  border-radius: 20px 20px 20px 20px;
  border:1px inset black;
  float:left;
  margin-left:10px;
  background:rgba(50,111,29,0.95);
  background-image:url(images/pricingbg.png);
  background-size: cover;
  background-position:bottom;
  margin-top:-10px;
  padding:10px;
}
.termprice {
  font-size:15px;
  line-height:40px;
  text-align:center;
  margin-top:5px;
}
.termcost {
  font-size:13px;
  line-height:20px;
  text-align:center;
}
.termsaving {
  font-size:13px;
  line-height:20px;
  text-align:center;
  margin-bottom:10px;
}
.resultswrapper {
  margin-left:110px;
  position:absolute;
  width:auto;
}

$("#AddCustomPrice").click(function(e) {
    e.preventDefault()
        $( "#dialog-message" ).dialog({
      modal: false,
      buttons: {
        "Add Price": function() {
                    var Term        = $("#CustomTerm").val()
                    var Price       = $("#CustomPrice").val()
                    var CurrRate    = $("#CurrentRateHidden").attr('data-id')
                    var Volume      = $("#VolumeHidden").attr('data-id')
                    var CurrentCost = '<?=$currentcost?>'
                    // $currentcost - $pricingarr['term36'] * $volume2
                    var Saving      = CurrentCost - Price * Volume
                    var AnnualCost  = Price * Volume
                    console.log(Price)
                    console.log(Price * Volume)
                    $(".resultswrapper").append(
          '<div class="termwrapper2">'
          +'  <div style="margin-top:-25px; margin-left:-16px; padding:5px; position:absolute; display: table-cell; vertical-align: bottom;">'
          +'    <img src="http://cdn2.bigcommerce.com/server400/26074/products/235/images/383/custom_quote_10041.1367332284.1280.1280_29641.1369264683.1280.1280__59812.1369264887.1280.1280.jpg" style="max-width:96px; max-height:45px; vertical-align:bottom; margin:auto auto; bottom:0; display: block; position: absolute;" />'
          +'  </div>'
          +'<div style="float:left; display: block; clear: both;">'
          +'  <div class="termprice"><div style="margin-top:0px; line-height:0;"><strong>'+Term+' Months</strong></div>'+Price+'</div>'
          +'  <div class="termcost">'+AnnualCost.toFixed(2)+'</div>'
          +'  <div class="termsaving">'+Saving.toFixed(2)+'</div>'
          +'  <div class="nodal"></div>'
          +'  <div class="swing"></div>'
          +'  <div class="termsaving"> </div>'
          +'</div>'
          +'</div>'
          )
          $( this ).dialog( "close" );
        }
      }
    });
  });