1

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

<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 被向上推并在表单缩小时破坏了布局。

4

1 回答 1

0

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

于 2012-10-10T15:54:11.940 回答