1

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

我已经很久没有用过桌子了，但我的记忆力稍微恢复了一点，我觉得我做得很好。我将布局分成 4 个垂直行。页眉包装器、主包装器、calltoaction 和页脚。我把这些都放在了一个包装里。几乎一切正常，但我不明白为什么内容和图标 td 不对齐？正如我多次声明的那样，整个事物的最大宽度应该是 600px。我不希望它像现在这样用完。

出于某种原因，当我在浏览器中查看带有“检查元素”选项的页面时，它似乎在我告诉他们之前关闭了 td。我需要做什么才能让这两个 td 彼此对齐并使整个事物的最大宽度为 600px？

<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<meta name="viewport" content="initial-scale=1.0">
    <style>
    body { margin:0; padding:0; width:100% !important; overflow-y:scroll; }
    p { margin:0 0 10px 0; line-height:1.4; clear:right; }
    code { font-size:1.2em; }
    .headerwrapper { 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;}
    </style>
    <title>email template</title>
</head>
<body>
    <table class="wrapper" width="556" align="center" border="0" cellpadding="0" cellspacing="0">
        <tbody class="headerwrapper">
                <tr class="header">
                    <td class="fixedwidth">
                        <img src="http://i49.tinypic.com/347i55g.png" border="0">
                    </td>
                </tr>
                <tr class="devices" style="width:600px; height:300px;">
                    <td>    
                        <img src="http://i47.tinypic.com/nujr9.png">
                    </td>
                </tr>   
        </tbody>
        <tr class="miniwrapper">
            <tr class="fixedwidth">
                <td class="content" align="left">
                    tekst
                </td>
                <td class="icons"align="left">
                    tekst
                </td>
            </tr>
        </tr>
        <tr>
            <td>
                calltoaction
            </td>
        </tr>
        <tr>
            <td>
                footer
            </td>
        </tr>
    </table>
</body>  

</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:320px;  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:600px; background-color: #000000; margin:0px; padding:0px;}
    .header {display:none;}
    .wrapper {width:100%; background-color: #dbdadb; align:center;}
    .fixedwidth {width:100% !important;}
    .content {width:340px; 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="600" align="center" border="0" cellpadding="0" cellspacing="0" margin="0">
        <tbody class="headerwrapper">
                <tr class="header">
                    <td class="fixedwidth" colspan="2">
                        <img src="http://i49.tinypic.com/347i55g.png" border="0">
                    </td>
                </tr>
                <tr class="devices" style="width:600px; height:300px;">
                    <td colspan="2">    
                        <img src="http://i47.tinypic.com/nujr9.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>

你可以在这里看到一个例子；http://kellyvuijst.nl/email/email.html（带有图像和所有） 当屏幕缩放到小于 400 像素时，我希望图标 td 在内容下移动，但我似乎无法管理。我认为显示块可以解决问题，但事实并非如此。此外，还有这个奇怪的黑色/灰色空间，我不知道为什么会在那里。当我添加表格时它出现了，所以它必须以某种方式发生冲突。我发现桌子非常凌乱和混乱，所以我希望有人可以为我解决问题。

4

2 回答 2

1

您在标题和设备行中的 td 中缺少 colspan 属性：

            <tr class="header">
                <td class="fixedwidth" colspan="2">
                    <img src="http://i49.tinypic.com/347i55g.png" border="0">
                </td>
            </tr>
            <tr class="devices" style="width:600px; height:300px;">
                <td colspan="2">    
                    <img src="http://i47.tinypic.com/nujr9.png">
                </td>
            </tr>
于 2012-06-14T13:04:28.923 回答
1

（按照您在评论中提供的 HTML 设计草图 - http://i48.tinypic.com/1zp2m89.png）

为了实现这一点，请将colspan="2"( colspan ) 设置为较大的行 TD。这将使它们跨越 2 列，并将第三行（内容和图标）保留为两列行。如果您以后不需要通过添加更多列来使设计复杂化，这将是一个很好的解决方案，因为使用 colspan 会非常混乱。如果在某些时候它变得过于混乱，您还可以在另一个表中使用一个表来实现相同的结果并提供一种微调设计的简单方法。

我已经使用您的代码设置了一个示例：http: //jsfiddle.net/dvirazulay/TFweS/1/

于 2012-06-14T14:03:01.893 回答