在响应时面临对齐整体内容的问题

Question

我正在按照内联样式方法来开发此布局。当我让它响应时，正文和页脚内容没有对齐。正如您在 link 上共享的图像中看到的那样，内容在响应时没有很好地对齐：

这是我的代码

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Throttle Up Coaching</title>
</head>
<style type="text/css">
    @media only screen and (max-width: 550px), screen and (max-device-width: 550px) {
        body{width: 400px;}
        .gutter img p{width: 400px;}
        .content{width: 400px;}
        .social-connect {width: 100%;}
    }
</style> 
<body bgcolor="#EEE">
    <div class="content">
        <table width="646" cellspacing="0" cellpadding="0" style="color: #D8D8D8; text-align: left; border-collapse: collapse; border-spacing: 0; margin: 0 auto; border: 0;">
            <tr>
                <td colspan="3" style='color: #fff; margin: 0 auto; padding: 0; font: bold 12px/28px "Trebuchet", "Trebuchet MS", serif;' align="center" bgcolor="#D8D8D8" valign="top">
                    <a style="color: white; text-decoration: none;" href='/emailer'>CLICK TO VIEW THIS EMAIL IN YOUR BROWSER</a>
                </td>
            </tr>
            <tr>
                <td class="gutter" width="60" style="color:black; font-weight: normal; margin: 0;" align="left" bgcolor="#fff" valign="top">
                    <img src="https://i.ibb.co/bPKhXJG/logo.png" align="top" width="200" style="padding: 30px 40px;">
                    <img src="https://i.ibb.co/0J1Tdqv/background-image.png" border="0" width=100%>
                    <div style="padding-left: 50px; padding-right:50px; line-height: 30px;">
                        <p >My Matching Interview has enrolled you in an interview<br>
                        <h1 style="font-size: 20px; font-weight: bold;">Sprint: Solve Big problems and test ideas in just five day</h1>
                        access and complete your interview
                        </p><br>
                        <a href="https://interview-master.client-ui.javelin.scr.ee/question/447/942" target="_blank" style="color: #fff; background-color: #29CC8F; font-weight: 800; padding: 20px 25px; border-radius: 0.5rem; display: inline-block; text-decoration: none;">COMPLETE YOUR INTERVIEW</a>
                        <br><br>
                        <hr>
                        <p style="font-size: 14px; color: #7A7A7A; line-height: 2; padding-right: 50px;">If you have any questions, please contact <a href="mailto:support@throttleupcoaching.com">support@throttleupcoaching.com</a> or call to our toll free number <b style="color: #000;">+372 800 1800</b></p><br>
                    </div>
                </td>
            </tr>
        </table>
    </div><br><br>
    <div class="social-connect" style="font-size: 13px; text-align: center; color: #7A7A7A;">
        <table align="center" style="display:inline-block;">
            <tr>
                <td>
                    <a href="#" style="padding-right: 1rem;"><img src="https://i.ibb.co/Xytf49L/icon-48.png" height="24" alt="LinkedIn"></a>
                    <a href="#" style="padding-right: 1rem;"><img src="https://i.ibb.co/cDyVv3r/icon-49.png" height="24" alt="Facebook"></a>
                    <a href="#"><img src="https://i.ibb.co/QFpjGhH/icon-50.png" height="24" alt="Google plus"></a>
                    <br><br><br>
                    <div style="font-family:'Helvetica Neue', Helvetica, Arial, sans-serif; text-align: center; font-size:12px; font-weight:400; line-height:22px; color:#445566;">
                        You are receiving this email advertisement because you registered with Throttle Up Coaching by<br>
                        Javelin Corporation&reg; All Rights Reserved.(123 Main Street, Austin, TX 78701) and agreed to<br>
                        receive emails from us regarding new features, events and special offers.<br><br>
                        <div style="font-family:'Helvetica Neue', Helvetica, Arial, sans-serif;font-size:11px;font-weight:bold;line-height:16px;text-align:center;color:#445566;">
                            <a class="footer-link" href="#" target="_blank" style="color: #888888;">Privacy</a>&#xA0;&#xA0;&#xA0;&#xA0;&#xA0;&#xA0;&#xA0;&#xA0;
                            <a class="footer-link" href="#" target="blank" style= "color:#888888;">Unsubscribe</a>
                        </div>
                    </div>
                </td>
            </tr>
        </table>
    </div><br><br>
</body>
</html>

如能帮助解决此问题，我们将不胜感激。谢谢！

Answer 1

您的 HTML 有一些地方（我认为）有问题。

移动设备的主体设置为 400px
内容设置为 400px

我添加了一个新的 class container 来更改移动设备上外部 table 的宽度。

下面是更新代码。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Throttle Up Coaching</title>
</head>
<style type="text/css">
    @media only screen and (max-width: 550px), screen and (max-device-width: 550px) {
        .social-connect {width: 100%;}
        .container{width:100% !important;}
    }
</style> 
<body bgcolor="#EEE">
    <div class="content container">
        <table width="646" cellspacing="0" cellpadding="0" style="color: #D8D8D8; text-align: left; border-collapse: collapse; border-spacing: 0; margin: 0 auto; border: 0;" class="container">
            <tr>
                <td colspan="3" style='color: #fff; margin: 0 auto; padding: 0; font: bold 12px/28px "Trebuchet", "Trebuchet MS", serif;' align="center" bgcolor="#D8D8D8" valign="top">
                    <a style="color: white; text-decoration: none;" href='/emailer'>CLICK TO VIEW THIS EMAIL IN YOUR BROWSER</a>
                </td>
            </tr>
            <tr>
                <td class="gutter banner" width="60" style="color:black; font-weight: normal; margin: 0;" align="left" bgcolor="#fff" valign="top">
                    <img src="https://i.ibb.co/bPKhXJG/logo.png" align="top" width="200" style="padding: 30px 40px;">
                    <img src="https://i.ibb.co/0J1Tdqv/background-image.png" border="0" width=100%>
                    <div style="padding-left: 20px; padding-right:20px; line-height: 30px;" class="">
                        <p >My Matching Interview has enrolled you in an interview<br>
                        <h1 style="font-size: 20px; font-weight: bold;">Sprint: Solve Big problems and test ideas in just five day</h1>
                        access and complete your interview
                        </p><br>
                        <a href="https://interview-master.client-ui.javelin.scr.ee/question/447/942" target="_blank" style="color: #fff; background-color: #29CC8F; font-weight: 800; padding: 20px 25px; border-radius: 0.5rem; display: inline-block; text-decoration: none;">COMPLETE YOUR INTERVIEW</a>
                        <br><br>
                        <hr>
                        <p style="font-size: 14px; color: #7A7A7A; line-height: 2; padding-right: 50px;">If you have any questions, please contact <a href="mailto:support@throttleupcoaching.com">support@throttleupcoaching.com</a> or call to our toll free number <b style="color: #000;">+372 800 1800</b></p><br>
                    </div>
                </td>
            </tr>
        </table>
    </div><br><br>
    <div class="social-connect" style="font-size: 13px; text-align: center; color: #7A7A7A;">
        <table align="center" style="display:inline-block;">
            <tr>
                <td>
                    <a href="#" style="padding-right: 1rem;"><img src="https://i.ibb.co/Xytf49L/icon-48.png" height="24" alt="LinkedIn"></a>
                    <a href="#" style="padding-right: 1rem;"><img src="https://i.ibb.co/cDyVv3r/icon-49.png" height="24" alt="Facebook"></a>
                    <a href="#"><img src="https://i.ibb.co/QFpjGhH/icon-50.png" height="24" alt="Google plus"></a>
                    <br><br><br>
                    <div style="font-family:'Helvetica Neue', Helvetica, Arial, sans-serif; text-align: center; font-size:12px; font-weight:400; line-height:22px; color:#445566;">
                        You are receiving this email advertisement because you registered with Throttle Up Coaching by<br>
                        Javelin Corporation&reg; All Rights Reserved.(123 Main Street, Austin, TX 78701) and agreed to<br>
                        receive emails from us regarding new features, events and special offers.<br><br>
                        <div style="font-family:'Helvetica Neue', Helvetica, Arial, sans-serif;font-size:11px;font-weight:bold;line-height:16px;text-align:center;color:#445566;">
                            <a class="footer-link" href="#" target="_blank" style="color: #888888;">Privacy</a>&#xA0;&#xA0;&#xA0;&#xA0;&#xA0;&#xA0;&#xA0;&#xA0;
                            <a class="footer-link" href="#" target="blank" style= "color:#888888;">Unsubscribe</a>
                        </div>
                    </div>
                </td>
            </tr>
        </table>
    </div><br><br>
</body>
</html>

在响应时面临对齐整体内容的问题

Facing issue in aligning the overall content when it is responsive

css

html-email

responsive