Question

我正在创建一个响应式登录页面。我在表中的文本部分为用户登录之前提供了一些快速信息。问题是，当屏幕/窗口大小变小时，登录表单会覆盖/覆盖文本。当屏幕缩小时，我希望文本在登录表单下方移动，但是我不确定如何执行此操作。我可以在顶部获得徽标图像，并可以使用“最大宽度” CSS属性在顶部的链接菜单中响应大小更改，但无法弄清楚如何将某些内容移动到页面的另一部分。我正在使用的HTML / CSS粘贴在下面，我还附上了手机屏幕截图，显示了重叠问题。我知道HTML / CSS并不理想，但是我必须在非常有限的编辑器中执行此操作。非常感谢您的帮助。

<p><img src="https://www.westga.edu/uwgonline/assets-uwgonline/pics/CourseDen.png" style="z-index: -1; margin: 0% 1.5%; max-width: 1100px; width: 90%; position: absolute; height: auto;" /></p>
<p>&nbsp;</p>
<p>&nbsp;</p>
<p>&nbsp;</p>
<p>&nbsp;</p>
<table style="z-index: -1; opacity: 0.85; max-width: 100%; width: 50%; left: 35%; top: 380px; position: absolute;">
    <tbody>
        <tr>
            <td style="padding: 20px; background: #FFFFFF;">
                <p>
                    <span style="color: #000000;">
                    <span style="color: #000000;">
                        <em>Please note your password is the same as your <strong>UWG ID</strong> and is case sensitive.</em>
                    </span>
                    </span>
                </p>
                <strong><span style="color: #000000;">UWG Online Help Desk</span></strong>
                <br />
                <span style="color: #000000;">(M-F 8a-5p ET) 678-839-6248 or 1-855-933-8946</span>
                <br /><a href="mailto:online@westga.edu">online@westga.edu</a> &bull; <a rel="noopener noreferrer" href="http://uwgonline.westga.edu/uwgonline/chat-with-us.php" target="_blank">Chat</a>
                <p><strong><span style="color: #000000;">24/7/365 D2L Help Center</span></strong>
                    <br /><span style="color: #000000;">Knowledge Base &amp; Live Support</span>
                    <br /><a rel="noopener noreferrer" href="https://D2Lhelp.view.usg.edu" target="_blank">https://D2Lhelp.view.usg.edu</a></p>
            </td>
        </tr>
    </tbody>
</table>
<hr />
<table style="max-width: 100%; width: 99%; text-align: center; border: none; border-collapse: collapse;">
    <tbody>
        <tr>
            <td style="width: 20%;"><a href="https://uwgonline.westga.edu/uwg-online-contact-us.php" target="blank" style="color: #777777;">Help</a></td>
            <td style="width: 20%; border-left: 1px solid #D3D3D3;"><a href="https://uwgonline.westga.edu/uwg-online-student-help.php" target="blank" style="color: #777777;"> Resources </a></td>
            <td style="width: 20%; border-left: 1px solid #D3D3D3;"><a href="http://uwgonline.westga.edu/" target="blank" style="color: #777777;"> More Info</a></td>
            <td style="width: 20%; border-left: 1px solid #D3D3D3;"><a href="https://westga.view.usg.edu/d2l/systemCheck" target="blank" style="color: #777777;"> System Checker</a></td>
            <td style="width: 20%; border-left: 1px solid #D3D3D3;"><a href="https://go.view.usg.edu/" target="blank" style="color: #777777;"> eCampus, WebMBA, &amp; EU</a></td>
        </tr>
    </tbody>
</table>
<hr />

Answer 1

我的问题的答案是将卡在登录框后面的文本删除，并将其position: absolute删除。这会将登录框置于其下方。我们真正想要的是文本左侧的登录框，仅当屏幕/窗口小于一定大小时才向下移动至其下方，但是由于我无法编辑登录框，因此我们决定采用这种解决方案成为我们可以编辑的最佳内容。您@Sirence在评论中提及了position: absolute信息！

响应式HTML / CSS，可在表单

1 个答案: