1

我对 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”&lt;/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>
4

1 回答 1

0

警告:我自己是 Ink 的新手。让我“跳出来”的是你在外面使用了一个容器,在里面使用了多行。对于全宽,交换行和容器类 --> 以便具有类行的表包含具有类容器的表。

于 2014-08-17T01:29:37.403 回答