Question

一个简单的问题，代表我的挫折程度很高。

我正在创建一所房子。我动态创建4个房间（div），宽度，高度和位置绝对。

创建它们之后，我用jquery将它们附加到html中唯一的div：

<div id="myHouse"></div>

一切正常，除了myHouse没有采取我刚刚创建的房间的高度和宽度，它只有0px的高度。我尝试给它一个相对定位，绝对定位，静态和其他一切。

看起来div似乎是空的，但事实并非如此。它里面有我的房间。

CODEPEN CODE

可能是什么问题？

Answer 1

这是您更新的创建循环。基本上，您必须计算房屋的总宽度和高度，如下所示：

var totalWidth = 0,
    totalHeight = 0;

for(i = 0; i<house.rooms.length; i++){
    //Generating rooms
    var room = '<div class="room" style="width: '+house.rooms[i].width+'px; height: '+house.rooms[i].height+'px; top: '+house.rooms[i].top+'px; left: '+house.rooms[i].left+'px; background-color:'+house.rooms[i].floor+'"></div>';

    totalWidth = Math.max(totalWidth, parseFloat(house.rooms[i].width) + parseFloat(house.rooms[i].left));
    totalHeight = Math.max(totalHeight, parseFloat(house.rooms[i].height) + parseFloat(house.rooms[i].top));

    $('#myHouse').append(room);
};

$('#myHouse').css({ width: totalWidth, height: totalHeight });

如您所见，我们在每一步测试是否必须使用Math.max(x1, x2)方法扩展房屋的边界。

如果可能的话，我建议您更新数据模型以使用数字而不是字符串作为值。 parseFloat方法可以产生有趣的结果，如果你没有通过它可能数字的东西。

此外，这种方法不会考虑边界，但你明白了。

最后，请注意，此解决方案当然不会有负坐标。

Answer 2

如果在元素中使用绝对位置，则必须计算容器的高度。如果它们的位置设置为绝对值，它的高度不会自动设置为容纳内部元素。

父div上没有高度，内部创建了动态元素

2 个答案: