0

我正在编写一些 html 代码来制作 html 电子邮件。我做了一些研究，发现使用老式 html，例如表格等是最好的方法。

在您对以前的问题提供了所有帮助之后（谢谢！）我开始研究其余部分并使布局在移动设备上易于阅读，这就是我现在所拥有的；

<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<meta name="viewport" content="initial-scale=1.0">
<meta name="format-detection" content="telephone=yes">
    <style>
    body { margin:0; padding:0; width:100% !important; overflow-y:scroll; background-image: url(background.png); background-repeat: repeat-x; background-color: #dbdadb; -webkit-text-size-adjust:100%; -ms-text-size-adjust:100%;}
    p { margin:0 0 10px 26px; line-height:1.2; width:320px;  font-size:0.9em;}
    .contact {margin-left:5px; margin-top:15px; width:170px; font-size:0.9em; text-align:center;}
    h1 { margin:0 0 10px 26px; line-height:1.2; width:320px;  font-size:1.1em; font-weight:normal;}
    img {outline:none; text-decoration:none; -ms-interpolation-mode: bicubic; display:block;}
    a img {border:none;}
    .headerwrapper {width:600px; background-color: #000000; margin:0px; padding:0px;}
    .header {text-align:center;}
    .wrapper {width:600px; background-color: #dbdadb; align:center;}
    .fixedwidth {width:600px !important;}
    .content {width:340px;}
    .icons {width:260px;}
    .devices {width:600px; height:310px;}
    .miniwrapper {width:600px;}
    .footer { background-image: url(http://i49.tinypic.com/54f2ac.png); text-align:center; line-height:1.2; width:320px;  font-size:0.9em;}
    .footermobile {display:none;}
    .actiemobile {display:none;}
    .iconwrapper {margin:0; line-height:1.2; font-size:0.9em;}
    .iconwrapper p {margin-left: 0px; margin-bottom:10px;}
    .headermobile {display:none;}
    .devicesmobile {display:none;}

    @media all and (max-width: 400px) {
    body { margin:0; padding:0; width:100% !important; overflow-y:scroll; background-image: url(background.png); background-repeat: repeat-x; background-color: #dbdadb;}
    p { margin:0 0 10px 26px; line-height:1.2; width:350px;  font-size:0.9em;}
    .contactmobile {margin-left:50%; margin-top:15px; width:170px; font-size:1.1em; text-align:center; line-height:1.2em;}
    h1 { margin:0 0 10px 26px; line-height:1.2; width:320px;  font-size:1.1em; font-weight:normal;}
    .headerwrapper {width:320px; background-color: #000000; margin:0px; padding:0px;}
    .header {display:none;}
    .wrapper {width:100%; background-color: #dbdadb; align:center;}
    .fixedwidth {width:100% !important;}
    .content {width:320px; display:block;}
    .icons {width:260px; display:block;}
    .devices {display:none;}
    .miniwrapper {width:100%;}
    .footer {display:none;}
    .actie {display:none;}
    .footermobile {display:block; background-image: url(footermobile.png); text-align:center; line-height:1.2; width:320px; height:164px; font-size:0.9em;}
    .actiemobile {display:block;}
    .headermobile {display:block; text-align:center;}
    .devicesmobile {display:block;}
    }

    /* Client-specific Styles */
    #outlook a {padding:0;} /* Force Outlook to provide a "view in browser" menu link. */
    .ExternalClass {width:100%;} /* Force Hotmail to display emails at full width */  
    .ExternalClass, .ExternalClass p, .ExternalClass span, .ExternalClass font, .ExternalClass td, .ExternalClass div {line-height: 100%;} /* Force Hotmail to display normal line  spacing. */ 
    #backgroundTable {margin:0; padding:0; width:100% !important; line-height: 100% !important;}
    /* End reset */
    </style>
    <title>email template</title>
</head>
<body>
    <table class="wrapper" width="100%" align="center" border="0" cellpadding="0" cellspacing="0" margin="0">
        <tbody class="headerwrapper">
                <tr class="header">
                    <td class="fixedwidth" colspan="2">
                        <img src="logo.png" border="0">
                    </td>
                </tr>
                <tr class="devices" style="width:600px; height:300px;">
                    <td colspan="2">    
                        <img src="devices.png">
                    </td>
                </tr>   

                <tr class="headermobile">
                    <td class="fixedwidth" colspan="2">
                        <img src="logomobile.png" border="0">
                    </td>
                </tr>
                <tr class="devicesmobile">
                    <td colspan="2">    
                        <img src="devicesmobile.png">
                    </td>
                </tr>   


        </tbody>
        <tr class="miniwrapper">
            <tr class="fixedwidth">
                <td class="content" align="left">
                    <h1>Werkt u al met apps?</h1>

<p>Het ontwikkelen van applicaties, oftewel apps, is namelijk booming! Steeds meer merken en 
bedrijven zien het gemak van een app in. Het is de ideale optie voor het versterken van uw merk, zowel extern als intern, of het opzetten van een geheel nieuw product. Ook de enorme groei in gebruik van mobiele apparaten zorgt er voor dat een sterk merk niet meer kan achter blijven.</p>

<p>Mocht u geïnteresseerd zijn in onze service, 
van op maat gemaakte applicaties en backend oplossingen, neem dan gerust contact met ons op.
U bent van harte welkom voor een kop koffie bij ons in de mediaBunker, tijdens een verkennend gesprek of een demonstratie van de 
mogelijkheden van mediaBunker als bedrijf.</p>

<p>Alvast bedankt en hopelijk tot ziens.</p>
                    </p>
                </td>
                <td class="icons">
                    <table>
                        <tr>
                            <td colspan="2">
                                No matter what device.<br>
                                We build natively.
                            </td>
                        </tr>
                        <tr>
                        <tbody class="iconwrapper">
                            <tr text-align="center">
                                <td><img src="apple.png"></td>
                                <td><p>Apple iOS is the operating<br>
                                    system that powers the <br>
                                    iPhone,  iPad and iPod touch.</p>
                                </td>
                            </tr>
                            <tr>
                                <td><img src="android.png"></td>
                                <td><p>With partners like Google,<br>
HTC and Motorola, Android is <br>
the fastest growing mobile OS.</p>
</td>
                            </tr>
                            <tr>
                                <td><img src="windows.png"></td>
                                <td><p>Together Microsoft and Nokia<br>
support conventional users <br>
with Windows Phone.</p>
</td>
                            </tr>
                            <tr>
                                <td><img src="html5.png"></td>
                                <td><p>Looking for other platforms<br>
like BlackBerry, Samsung <br>
Bada or HTML5 & CSS3?<br>
We can build it!</p>
</td>
                            </tr>
                        </tbody>
                        </tr>
                    </table>        
                </td>
            </tr>
        </tr>
        <tr>
            <td class="actie" colspan="2">
                <img src="http://i47.tinypic.com/11qi7pw.png">
            </td>
            <td class="actiemobile" colspan="2">
                <img src="actiemobile.png">
            </td>
        </tr>
        <tr>
            <td class="footer" colspan="2">
            <table>
                <tr cellspace="0">
                    <td width="200px" text-align="center"><p class="contact">Suikersilo-West 23 <br> 1165 MP Halfweg</p></td>
                    <td width="200px" text-align="center"><p class="contact"><a href="tel:0031238200140">Tel +31 23 820 0140</a><br> <a href="mailto:info@mediabunker.com">info@mediabunker.com</a></p></td>
                    <td width="200px" text-align="center"><p class="contact"><a href="http://mediabunker.com">www.mediabunker.com</a><br> <a href="http://twitter.com/mediabunker">twitter.com/mediabunker</a></p></td>
                </tr>
            </table>
            </td>

            <td class="footermobile" colspan="2">
            <table>
                <tr cellspace="0">
                    <td width="200px" text-align="center">
                        <p class="contactmobile">
                            Suikersilo-West 23<br>
                            1165 MP Halfweg<br>
                            <a href="tel:0031238200140">Tel +31 23 820 0140</a><br>
                            <a href="mailto:info@mediabunker.com">info@mediabunker.com</a><br>
                            <a href="http://mediabunker.com">www.mediabunker.com</a><br>
                            <a href="http://twitter.com/mediabunker">twitter.com/mediabunker</a><br>                        
                        </p>
                    </td>
                </tr>
            </table>
            </td>
        </tr>
    </table>
</body>  

</html>

我在使布局在移动设备上也能正常工作时遇到了一些麻烦。我想我想出了一个更好的解决方案，使用背景图像并将其他图像（设备、横幅等）放在上面。这可能会解决这个问题，对吧？

我还有另外两个问题；在移动设备上查看页面时，我无法让图标 td 进入内容下方。我认为显示块可以解决问题，但它没有......另外，当我添加图标表时，右边出现了这个奇怪的空间，它一定会以某种方式发生冲突，我该如何解决这个问题？

如果有帮助，这是我之前的问题；HTML 电子邮件表格嵌套 这是在线版本；http://kellyvuijst.nl/email/email.html

4

1 回答 1

0

向左对齐（当.icons td视口宽度小于 400px 时），因为它没有paddingor margin，而您的其他内容（h1, p）有 26px margin-right。

您可以通过将 26pxpadding-left应用于 .icons 来解决此问题。这将使左边缘.icons与它上面的内容对齐。

错误 #2，尝试 2：

查看您在评论中提供的演示链接后，我可以看到您描述的问题及其原因：您的内容比其包含元素更宽。

您已经为所有 320 像素的段落设置了一个明确的宽度，这使得.iconwrapper它比预期的更宽。我认为您不需要设置段落宽度，因此只需删除该 CSS 声明即可。

（在调试此类布局问题时，我的建议是使用 chrome 中的开发人员工具来检查您的 HTML 元素并查看 CSS 样式是如何应用的。我发现它确实有助于我可视化我的代码，并了解它如何影响布局.)

于 2012-06-15T10:37:03.930 回答