我有一个主div(大小可以在拖动时调整大小),其中有一些子元素。
子元素的数量是动态的(计数将来自API)。
因此,在某些情况下,例如,如果子元素的值在0到50之间,则应该使用一个大小;如果在51到200之间,则子元素应该使用不同的大小,但应大于先前的0到50的范围,类似一些条件。基本上,大小应取决于子元素的值。
在调整大小时,能够获得主div的高度,但是却难以获得正确的计算结果,以使主div中的所有子元素都具有动态尺寸。
我正在努力实现这样的目标, 在图像中,每个子元素根据值都有不同的大小,在我的情况下,div也可以通过拖动来调整大小。
主要div的代码
<div class="maindiv">
<div class="st`enter code here`_content">
<div class="row height_full">
<div class="stock_value">
.....
</div>
<div class="stock_value">
....
</div>
<div class="stock_value">
....
</div>
...
...
...
</div>
</div>
</div>
零件
<div class="stock_value">
....
</div>
将进入for循环,
for(var i=0; i<sub_ele.length; i++){
<div class="stock_value" style="width:`+w_d+`px; height:`+h_d+`px;">
....
</div>
}
我目前正在尝试以%的百分比给出大小,例如主div的某些百分比,
heightsd = $(".maindiv").height();
widthsd = $(".maindiv").width();
if(data[data.length-1]['high'] < 0){
w_d = widthsd * 0.2;
h_d = heightsd * 0.2;
}else if(data[data.length-1]['high'] > 0 && data[data.length-1]['high'] < 50){
w_d = widthsd * 0.30;
h_d = heightsd * 0.30;
}else if(){ .... }
.....
但是它没有按预期工作,它在div中造成了空白。
我不知道如何将div中的所有子元素放入特定大小。
答案 0 :(得分:0)
您正在尝试在可调整大小的父div内创建具有特定大小的div。值为0到50的子代具有固定的大小,以及值为51到200的子代以此类推。由于瓦片的固定大小,您在调整大小时在网格中创建不必要的间隙时遇到了问题。是吗?
看看Masonry API,我想它可能会满足您的需求,因为它会自动将子元素放置在适当的位置。