zurb墨水电子邮件包装并不跨越整个宽度

时间:2014-06-16 21:43:37

标签: html-email zurb-ink

我与Zurb Ink的电子邮件有问题。因此它在桌面上看起来很好,但是当它遇到媒体查询时就会出现这种差距,并且它似乎是在容器堆叠在彼此之上的时候用容器做的。我希望它跨越整个宽度。

http://i.stack.imgur.com/xygNK.png

这是我的代码:

<table class="container" id="hero-container">
        <!-- hero logo -->
        <tr>
            <td>
                <table class="row">
                    <tr>
                        <td class="wrapper last">
                            <table class="twelve columns">
                                <tr>
                                    <td id="hero-logo"><img id="logoImage" src="images/hero-logo.png" alt="Hero In The News" /></td>
                                    <td class="expander"></td>
                                </tr>           
                            </table>
                        </td>
                    </tr>
                </table>
            </td>
        </tr>
        <!-- /hero logo -->
        <!-- hero image -->
        <tr>
            <td>
                <table class="row">
                    <tr>
                        <td class="wrapper last">
                            <table class="twelve columns">
                                <tr>
                                    <td><img id="headerImage" src="images/hero-img.png" alt="City of San Jose - Capital of Silicon Valley" /></td>
                                    <td class="expander"></td>
                                </tr>
                            </table>
                        </td>
                    </tr>
                </table>
            </td>
        </tr>
        <!-- /hero image -->
        <!-- hero main article -->
        <tr>
            <td>
                <table class="row">
                    <tr>
                        <td>
                            <div class="wrapper last">
                                <table class="twelve columns">
                                    <tr>
                                        <td class="heading1 text-pad">Residents can Pace Energy Use <br/>with New Program</td>
                                        <td class="expander"></td>
                                    </tr>
                                </table>
                            </div>
                        </td>
                    </tr>
                </table>
            </td>
        </tr>

        <tr>
            <td>
                <table class="row">
                    <tr>
                        <td>
                            <div class="wrapper last">
                                <table class="twelve columns">
                                    <tr>
                                        <td class="text-pad"><p>The city of San Jose has implemented a program to help residents pace their water and energy consumption. </p></td>
                                        <td class="expander"></td>
                                    </tr>
                                </table>
                            </div>
                        </td>
                    </tr>
                </table>
            </td>
        </tr>

        <!-- button -->
        <tr>
            <td>
                <table class="row">
                    <tr>
                        <td>
                            <div class="wrapper last">
                                <table class="twelve columns">
                                    <tr>
                                        <td class="text-pad link"><p><a href="http://www.mercurynews.com/san-jose-neighborhoods/ci_25900245/residents-can-pace-energy-use-new-program">Read Full Article</a></p></td>
                                        <td class="expander"></td>
                                    </tr>
                                </table>
                            </div>
                        </td>
                    </tr>
                </table>
            </td>
        </tr>

        <!--/button --> 
        <!-- /hero main article -->
      </table>    



      <!--  articles row 1 -->
      <table class="container">
        <tr>
            <td>
                <table class="row">
                    <tr>
                        <td class="wrapper">
                            <table class="six columns article">
                                <tr>
                                    <td class="text-pad">
                                        <h2>Energy Efficiency Program Ushers Green Jobs into Kern</h2>
                                        <p>The green economy has arrived in Kern County, and not a moment...</p>
                                    </td>
                                    <td class="expander"></td>
                                </tr>
                            </table>
                        </td>
                        <td class="wrapper last">
                            <table class="six columns article">
                                <tr>
                                    <td class="text-pad">
                                        <h2>Stockton Gets a New “HERO”</h2>
                                        <p>From insulation to more efficient air conditioning to solar panels to...</p>
                                    </td>
                                    <td class="expander"></td>
                                </tr>
                            </table>
                        </td>

                    </tr>
                </table>
            </td>
        </tr>
      </table>
      <!-- /articles row 1-->

      <!--  articles row 2 -->
      <table class="container article-container">
        <tr>
            <td>
                <table class="row">
                    <tr>
                        <td class="wrapper article-wrapper">
                            <table class="six columns article">
                                <tr>
                                    <td class="text-pad">
                                        <h2>Fresno estimates $56M from HERO program</h2>
                                        <p>Officials with the City of Fresno expect to see more than $56 M...</p>
                                    </td>
                                    <td class="expander"></td>
                                </tr>
                            </table>
                        </td>
                        <td class="wrapper last article-wrapper-last">
                            <table class="six columns article">
                                <tr>
                                    <td class="text-pad">
                                        <h2>Lompoc City Council approves HERO Program</h2>
                                        <p>A new program that helps homeowners make energy and...</p>
                                    </td>
                                    <td class="expander"></td>
                                </tr>
                            </table>
                        </td>
                    </tr>
                </table>
            </td>
        </tr>
      </table>

1 个答案:

答案 0 :(得分:0)

警告:我自己是Ink的新手。什么&#34;跳出来&#34;对我来说,你在外面使用一个容器,里面有多行。对于全宽,交换行和容器类 - &gt;以便具有类行的表包含具有类容器的表。