0

我正在处理一封电子邮件，其中一些文本下方有一个按钮，右侧是产品图像。

代码：http: //jsfiddle.net/uw4Xz/

<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 按钮不尊重面板中的 2 列

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

我希望这很清楚！

4

1 回答 1

0

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

与此类似的东西会起作用：

.button {
  width:50% !important;
}

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

  .button {
    width:100% !important;
  }

}

这是工作演示。

于 2014-04-18T20:02:09.340 回答