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

Question

我正在制作一个测试登录页面并使用 Gravity Form 进行注册，我的问题是当表单在完成后自动调整大小(只为确认消息留出空间)时，它会向上推其下方的元素并破坏布局。我确定它是一个简单的解决方案，但我似乎找不到它。代码结构:

<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 在表单收缩时被推高并破坏布局。

Answer 1

如果您不希望事物在事物消失时四处移动，您可以尝试向 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 添加样式。