Html 当我的表单自动调整大小时，如何阻止网站元素被推高？

我正在制作一个测试登录页，并使用重力表单进行注册，我的问题是，当表单完成后自动调整大小时（只是为确认消息留出空间），它会向上推它下面的元素，并破坏布局。我相信这是一个简单的解决办法，但我似乎找不到。代码结构：

<h3 style="line-height: 15px;">SOME TEXT</h3>
<h3>MORE TEXT</h3>
<h3 style="line-height: 15px;">MORE TEXT</h3>
<h4>MORE TEXT</h4>
<img class="alignnone size-full wp-image-492" style="position: absolute; top: 430px; left: 80px;" src="image.png"width="350" height="202" /></a>
<div style="width: 40%; 
            background-color: #ffce32; 
            border: 3px solid #8E0F0F; 
            position: relative; bottom: 180px; left: 610px; 
            padding: 10px; border-radius:20px;">[my gravity form]</div>

<div style="position: relative; bottom: 160px;">
    <h4 style="text-align: center;">TEXT</h4>
    <img>
    <h4 style="text-align: center;">TEXT</h4>
    <div class="my_gallery" style="margin-left: 110px;"></div>
    <h4 style="text-align: center;">TEXT</h4>
    <p>TEXT</p>
    <h4 style="text-align: center;">TEXT</h4>
</div>

一些文本
更多文本
更多文本
更多文本
[我的重力表]
文本
文本
文本
正文

文本

---

问题在于表单正下方的div被向上推，并在表单收缩时破坏布局

如果不希望在对象消失时对象四处移动，可以尝试在div中添加一个不间断的空格，使其仍处于渲染状态。同时为div添加一个最小高度，使其不会变得太小，例如：

<div style="width: 40%; 
        background-color: #ffce32; 
        border: 3px solid #8E0F0F; 
        position: relative; bottom: 180px; left: 610px;
        min-height:400px; /*you'll have to experiment here to figure out what works*/
        padding: 10px; border-radius:20px;">[my gravity form] &nbsp;</div>

[我的重力表]

---

我还建议使用类和css文件，而不是在每个div中添加样式。

也许您可以向我们展示一下您的css+html？还有其他样式表吗？有几个html错误：一个

a

标记关闭第5行的

img

标记，还有一个（？）无意义的

img

标记在第二个

div

@ultranaut中，它实际上看起来像是自动关闭的图像标记，但是是的，其中有一个随机关闭锚标记和一个随机img。我认为这不会引起任何问题though@JeffLauder我只是把它们指给他看，我不知道它们是否是造成他的问题的原因。是的，图像标签是这样的，只是为了解释位置，它们在实际代码中做得很好。我试过了，但效果不太好。我正在寻找一些基本上可以防止窗体下方的div向上移动的东西，而不管窗体的大小。但是我仍然需要它能够在表单扩展时向下移动（现在可以了），因为第2页比第一页大。所以表单从第一页的高度A到第二页的更高的高度B，再到第三页的更小的高度C。我需要它下面的内容进行调整，但当表单高度小于起始高度时，不会碰撞到顶部元素。您可以在标准大小表单的顶部内容上设置最小高度（取决于表单中的内容，一旦关闭，您可能仍然需要）。。。我会调整我的回答谢谢！最小高度是尤里卡时刻，我将它设置为顶级跳水，现在它工作得非常完美！