Question

我一直在使用基础框架的表格内的2列上工作。当我将窗口调整到600px以下时，我无法理解为什么第2列会在第1列下降？当窗口调整大小时，我希望列彼此相邻。我已经将列设置为每个填充6，所以第二列不应该跳下来？

有谁知道我怎么解决这个问题？ 该代码适用于电子邮件简报，这就是我使用表的原因。

我有一个带有CSS代码的JSfiddle：jsfiddle

<body>
  <table class="body">
    <tr>
      <td class="center" align="center" valign="top">
        <center>
            <table class="row footer">
                <tr>
                    <td class="wrapper">

                      <table class="six columns">
                        <tr>
                          <td class="left-text-pad">

                            <h5>Column 1</h5>

                            <table>
                              <tr>
                                <td>
                                  A content text 1
                                </td>
                              </tr>
                            </table>

                            <h5>A Headline</h5>

                            <table>
                              <tr>
                                <td>
                                  A content text 2
                                </td>
                              </tr>
                            </table>

                            <h5>A Headline</h5>

                            <table>
                              <tr>
                                <td>
                                  A content text 3
                                </td>
                              </tr>
                            </table>
                          </td>
                          <td class="expander"></td>
                        </tr>
                      </table>
                    </td>
                    <td class="wrapper">
                     <table class="six columns">
                        <tr>
                          <td class="left-text-pad">

                            <h5>Column 2</h5>

                            <table>
                              <tr>
                                <td>
                                  A content text 1
                                </td>
                              </tr>
                            </table>

                            <h5>A Headline</h5>

                            <table>
                              <tr>
                                <td>
                                  A content text 2
                                </td>
                              </tr>
                            </table>

                            <h5>A Headline</h5>

                            <table>
                              <tr>
                                <td>
                                  A big text to test if the text is responsive.
                                </td>
                              </tr>
                            </table>
                          </td>
                          <td class="expander"></td>
                        </tr>
                     </table>
                    </td>
                </tr>
            </table>
        </center>
      </td>
    </tr>
</table>
</body>

Answer 1

在第一个包装类之上有一个标签。所以在tr标签里写样式就像

Answer 2

将"float: left"添加到collumn2的第二个包装器

Answer 3

在撰写本文时，大多数电子邮件客户端仍然使用嵌套表格布局。答案很简单：并非所有客户都能加速，并非所有计算机都能提速。

无论您的电子邮件客户端如何，在html电子邮件中使用表格是最实践和最佳的整体部署方法。基金会很好，是的 - 但它还不是电子邮件行业的标准。

从Mailchimp查看this handy tutorial。我只想澄清一点，这样做并没有错，最好先从上述教程中学习响应式电子邮件编码。

所有这一切 - 你在jsfiddle中所做的事实际上是正确的。但如果您不希望它们崩溃，只需删除@media query字符串即可。

响应列位于其他列

3 个答案: