Question

我正在制作一封电子邮件，其中我的某些文字下方有一个按钮，右侧有一个产品图片。

<body style="background:#cccccc">
 <table class="body" style="background:#cccccc">
    <tr>
         <td class="center" align="center" valign="top">
             <center>
                <table class="container">
                    <tr>
                        <td><!-- BEGIN CONTAINER TD-->
                            <table class="row">
                                <tr>
                                    <td class="wrapper last">
                                        <table class="twelve columns white">
                                            <tr style="border-bottom:5px solid #ffc780">
                                                <td bgcolor="#557dae">
                                                    <table align="right">
                                                        <tbody>
                                                            <tr>
                                                                <td>
                                                                <img src="http://placehold.it/236×94" alt="">
                                                                </td>
                                                            </tr>
                                                        </tbody>
                                                    </table>
                                                </td>
                                                <td class="expander"></td>
                                            </tr>
                                        </table>
                                    </td>
                                </tr>
                            </table>

                            <table class="row white">
                                <tr>
                                    <td class="wrapper last">
                                        <table class="twelve columns">
                                            <tr>
                                                <td class="text-pad">
                                                    <h6>Lorem ipsum dolor sit amet aptent taciti sociosqu</h6>
                                                </td>
                                            </tr>
                                        </table>
                                    </td>
                                </tr>
                            </table>

                            <table class="row white">
                                <tr>
                                    <td class="wrapper last">
                                        <table class="twelve columns">
                                            <tr>
                                                <td class="text-pad">
                                                    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vivamus lacinia nunc id diam bibendum tincidunt eu vel nisi.</p>
                                                </td>
                                            </tr>
                                        </table>
                                    </td>
                                </tr>
                            </table>                            
                            <table class="row white">
                                <tr>
                                  <td class="wrapper">
                                    <table class="eight columns">
                                        <tr>
                                            <td class="text-pad">
                                            <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vivamus lacinia nunc id diam bibendum tincidunt eu vel nisi. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vivamus lacinia nunc id diam bibendum tincidunt eu vel nisi. Lorem ipsum dolor sit amet.</p>
                                            </td>
                                            <td class="expander"></td>
                                        </tr>
                                        <tr>
                                            <td class="text-pad">
                                            <table class="button">
                                                <tr>
                                                    <td>
                                                        <a href="#">Order Now</a>
                                                    </td>
                                                </tr>
                                            </table>
                                            </td>


                                        </tr>

                                    </table>
                                  </td>
                                  <td class="wrapper last">
                                <table class="four columns">
                                      <tr>
                                        <td class="text-pad">
                                            <img src="http://placehold.it/144x186" style="border:1px solid #444444"/>
                                        </td>

                                        <td class="expander"></td>
                                      </tr>
                                    </table>

                                  </td>
                                </tr>
                          </table>

我在这里找到了一个答案，证实了我怀疑需要使用子网格：

Zurb Ink Button Not Respecting 2 Columns in Panel

然而，该示例在按钮右侧有文本。我希望我的按钮是当前宽度的一半，但右边没有文字。按钮上方的段落应保持原样宽。

我希望这很清楚！

Answer 1

在您的情况下，最简单的解决方案是将按钮的宽度设置为50％。

类似的东西会起作用：

.button {
  width:50% !important;
}

@media only screen and (max-width: 600px) {

  .button {
    width:100% !important;
  }

}

这是 demo 。

Zurb Ink电子邮件 - 没有右边内容的子网格按钮？

1 个答案: