javascript - 在内部创建动态元素的父 div 上没有高度

Question

代表我的一个简单问题带来了很高的挫败感。

我正在 build 一座房子。我正在动态创建 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 方法传递一些可能是数字的东西，它可能会产生有趣的结果。

此外，此方法不会考虑边框，但您明白了。

最后，请注意，此解决方案当然要求您不要使用负坐标。