如何在不移动下面的项目的情况下注入一堆图像

Question

我有以下代码：

  <br/> <div id='people'></div> <br/>
  a bunch of text . .

所以人民div是空的开始然后我有javascript（在ajax回调的后端填充该div与这样的东西：

    $("#people").html(data.results)

其中data.results是一堆图像html（“等等）

问题在于，当图像显示时，这会推下“一堆文字”部分，看起来有点跳跃。我希望它提前放置空间，所以当调用.html（）方法时，它只是用这个图像html填充DOM，但不会移动或移动页面上的任何其他内容。

Answer 1

如果你知道结果图像需要多大空间，你可以通过css min-height给这个div一个初始高度：

<br/> <div id='people' style='min-height: 250px;'></div> <br/>

除此之外，不是真的。当您向div添加内容时，它会扩大并推动其他内容。

Answer 2

有两种方法可以实现这一目标。第一种是在CSS中声明一条规则，如果你知道内容的高度，就可以设置#people div的高度（或最小高度）。

#people {
    min-height: 200px;
}

另一种选择是允许#people div内容在内容区域溢出时滚动。这可能会或可能不会达到预期的效果。 （CSS）

#people {
    width: 400px;
    height: 300px;
    overflow: auto;
}