文章/答案/技术大牛

发布

社区首页 >问答首页 >为什么我的HTML电子邮件代码在不同的宽度上不能正常工作？

问为什么我的HTML电子邮件代码在不同的宽度上不能正常工作？
EN

Stack Overflow用户

提问于 2019-08-11 01:57:29

回答 2查看 42关注 0票数 0

我正在练习编写HTML电子邮件代码，但为了这个特殊的问题，我已经坚持了很长一段时间，无论我尝试什么。

当视图达到<= 600px (向左滚动屏幕时)时，This text should be in the middle!文本位于1200x1000占位符内部，但不在占位符的正中间。

另一方面，当视图达到>= 601px时，This text should be in the middle!文本位于320x30占位符之间，而不是1200x1000占位符内部

最后，一旦它达到<= 1207px，左右滚动就开始在整个页面上发生，它不应该发生这种情况，但不确定为什么会发生这种情况。

我不知道为什么会发生这些事情，只是觉得我在解决这个问题上已经别无选择了。我做错了什么?我如何才能纠正它？下面也提供了一个提琴：https://jsfiddle.net/s01mr3xp/50/

这是我的HTML

<!DOCTYPE html>
<html>
<head>
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta name="x-apple-disable-message-reformatting" />
    <link href="https://fonts.googleapis.com/css?family=Lato:300,400,700,900&amp;v=1.0&amp;song=cantbuymelove" rel="stylesheet"
          type="text/css" />
    <link href="https://fonts.googleapis.com/css?family=Montserrat:400,500,700&display=swap" rel="stylesheet">
    <style type="text/css">
        @import url("https://use.typekit.net/anr2nbh.css");

        table td, table th {
            border-collapse:collapse;
            border-spacing:0px;
            mso-table-lspace:0pt;
            mso-table-rspace:0pt;
            border:0px none;
            padding:0;
        }

        @media screen and (max-width: 600px){
            .header-welcome {
                background-image: url('http://via.placeholder.com/1200x1000');
                background-size: 320px 320px;
                background-repeat: no-repeat;
                width: 320px !important;
                height: 320px !important;
            }

            .width-320 {
                width: 320px !important;
            }

            .height-auto {
                height: auto !important;
            }

            .overload {
                display: block !important;
            }

            .hide {
                display: none !important;
            }

            .fontsize-11 {
                font-size: 11px !important;
            }
        }
    </style>
    <!--[if gte mso 9]>
    <style type="text/css">
        .outlook-fallback {
            font-family: Arial, sans-serif !important;
        }
    </style>
    <xml>
        <o:OfficeDocumentSettings>
            <o:AllowPNG />
            <o:PixelsPerInch>96</o:PixelsPerInch>
        </o:OfficeDocumentSettings>
    </xml>
    <![endif]-->
</head>
<body width="100%" bgcolor="#f4f8f1">
<table border="0" width="100%" cellspacing="0" cellpadding="0">
    <tbody>
    <tr>
        <td align="center">
            <table border="0" cellspacing="0" cellpadding="0">
                <tbody>
                <tr>
                    <td class="width-320" style="margin: 0 auto;" width="1200">
                        <table border="0" cellspacing="0" cellpadding="0">
                            <tbody>
                            <tr>
                                <td class="width-320" align="center" ><a href="#"> <img class="width-320 height-auto" style="display: block;" src="http://via.placeholder.com/328x44" width="328" height="44" border="0" /> </a></td>
                            </tr>
                            <tr>
                                <td class="width-320" align="center" height="30"><img class="width-320" style="display: block;" src="http://via.placeholder.com/320x30" width="600" height="30" border="0" /></td>
                            </tr>

                            <tr>
                                <td class="width-320 header-welcome" valign="top" align="center">
                                    <a href="#">
                                        <font class="fontsize-11 outlook-fallback" style="font-family: museo-sans,Arial,Sans-Serif; font-weight: 100; font-size: 40px; color: #000000;">This text should be in the middle!</font>
                                    </a>
                                    <a href="#">
                                        <img class="hide" style="display: block;" src="http://via.placeholder.com/1200x1000" alt="Welcome!" border="0" />
                                    </a>
                                </td>
                            </tr>
               </tbody>
            </table>
        </td>
    </tr>
    </tbody>
</table>
</body>
</html>

html

debugging

回答 2

Stack Overflow用户

发布于 2019-08-11 06:16:34

仔细看看这些：

@media screen and (max-width: 600px){
  .header-welcome {
    background-image: url('http://via.placeholder.com/1200x1000');
    background-size: 320px 320px;
    background-repeat: no-repeat;
    width: 320px !important;
    height: 320px !important;
  }

  .hide {
    display: none !important;
  }

<tr>
  <td class="width-320 header-welcome" valign="top" align="center">
    <a href="#">
      <font class="fontsize-11 outlook-fallback" style="font-family: museo-sans,Arial,Sans-Serif; font-weight: 100; font-size: 40px; color: #000000;">This text should be in the middle!</font>
    </a>
    <a href="#">
      <img class="hide" style="display: block;" src="http://via.placeholder.com/1200x1000" alt="Welcome!" border="0" />
    </a>
  </td>
</tr>

当屏幕宽度为<=600px时：

欢迎您正在为.header-

类设置背景图像。您正在隐藏额外的图像元素<img class="hide"

，

屏幕宽度>600px时：

- image is not set

额外的图像元素被显示出来，文本被放在它的上面。

然后，您在这里使用了valign="top"：

<td class="width-320 header-welcome" valign="top" align="center">

将其更改为valign="middle"。这会将文本垂直放置在单元格的中间。

票数 0

Stack Overflow用户

发布于 2019-08-17 06:09:35

我没有意识到它被搁置了。真对不起。答案是这样的：

目前，每3个是蓝色的，每5个是黑色的。我假设你想要黑色之后的第三个是蓝色的。您需要将css更改为

li:nth-child(5n-2) {
  background: blue;
}

li:nth-child(5n) {
  background: black;
}

票数 0

页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持

原文链接：

https://stackoverflow.com/questions/57444473

复制

相似问题

问为什么我的HTML电子邮件代码在不同的宽度上不能正常工作？
EN

回答 2

Stack Overflow用户

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问为什么我的HTML电子邮件代码在不同的宽度上不能正常工作？EN

回答 2

Stack Overflow用户

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问为什么我的HTML电子邮件代码在不同的宽度上不能正常工作？
EN