Question

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

<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添加样式。

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

1 个答案: