Проблема с переполнением контейнера динамическими элементами
Уже несколько дней бьюсь над этой проблемой и не могу найти решение. Уверен, что упускаю что-то простое, но никак не пойму, что именно.
Пробовал разные варианты, которые находил в интернете, например overflow:hidden или overflow:auto, менял структуру на табличную и так далее.
Проблема в том, что колонки слева имеют переменную ширину и зависят от выбора пользователя на предыдущей странице. Поэтому нельзя задать фиксированную ширину для правой части, и нельзя использовать счетчик для ограничения количества колонок, когда пользователь добавляет Пользовательскую цену.
HTML разметка:
<div class="priceContainer">
<div class="itemBox">
<div class="logoSection">
<img src="images/CompanyLogo.png" class="companyImage" />
</div>
<div class="priceValue">$0.05125</div>
<div class="totalAmount">$2,874.45</div>
<div class="discountValue">$543.22</div>
<div class="priceValue">$0.05847</div>
<div class="totalAmount">$3,123.88</div>
<div class="discountValue">$445.77</div>
<div class="priceValue">$0.05300</div>
<div class="totalAmount">$2,940.33</div>
<div class="discountValue">$612.45</div>
<div class="priceValue">placeholder</div>
<div class="totalAmount">placeholder</div>
<div class="discountValue">placeholder</div>
</div>
</div>
CSS стили:
.itemBox {
border-radius: 15px;
border: 2px solid #333;
float: left;
margin-right: 15px;
background: rgba(45, 120, 35, 0.9);
background-image: url(images/backgroundPattern.png);
background-size: contain;
padding: 12px;
}
.priceValue {
font-size: 16px;
line-height: 35px;
text-align: center;
margin-top: 8px;
}
.totalAmount {
font-size: 14px;
line-height: 25px;
text-align: center;
}
.discountValue {
font-size: 14px;
line-height: 25px;
text-align: center;
margin-bottom: 12px;
}
.priceContainer {
margin-left: 120px;
position: relative;
width: auto;
}
JavaScript код:
$("#CreateCustomRate").click(function(event) {
event.preventDefault();
$("#popup-form").dialog({
modal: true,
buttons: {
"Создать цену": function() {
var Duration = $("#PeriodInput").val();
var Rate = $("#RateInput").val();
var BaseRate = $("#BaseRateData").attr('data-value');
var Usage = $("#UsageData").attr('data-value');
var BaseCost = originalCost;
var TotalSaving = BaseCost - Rate * Usage;
var YearlyCost = Rate * Usage;
$(".priceContainer").append(
'<div class="customItemBox">'
+' <div class="logoSection">'
+' <img src="images/custom_logo.png" class="companyImage" />'
+' </div>'
+'<div class="contentBlock">'
+' <div class="priceValue"><strong>'+Duration+' мес.</strong><br>'+Rate+'</div>'
+' <div class="totalAmount">'+YearlyCost.toFixed(2)+'</div>'
+' <div class="discountValue">'+TotalSaving.toFixed(2)+'</div>'
+'</div>'
+'</div>'
);
$(this).dialog("close");
}
}
});
});
Возможно, код не самый красивый, но мне нужно, чтобы он работал. Буду благодарен за быстрые ответы!