Question

在下面的代码中，如果容器的尺寸小于X像素（对于较小的设备或移动设备），我希望水平的三列块彼此叠放并堆叠。我应该如何以及在表的哪个元素上应用此属性。请注意，代码是内容块，因此我宁愿不要将CSS应用于整个电子邮件模板或电子邮件<body>，除非这是解决此问题的唯一方法（例如使用@media only screen and (max-width: 420px) ）。

<table border="0" valign="top" cellpadding="10" style="font-family:arial,helvetica,sans-serif;min-width: width 500px;background-color: #f6f4f0;">

    <!-- Title: BEGIN-->
    <tr>
        <td>
            <h2>Title</h2>
        </td>
    </tr>
    <!-- Title: END-->

    <tr>
        <td>
            <table cellpadding="20">
                <tr>
                    <td style="background-color: #ffffff;" width="32%">
                        <table>

                            <tr>
                                <td>
                                    <h3>Lorem ipsum </br>dolor sit</h3>
                                </td>

                            </tr>
                            <tr>
                                <td>
                                    <a href=""><img src="https://homepages.cae.wisc.edu/~ece533/images/watch.png" style="height: auto; width: 100%;"
                                            width="1024"></a></td>
                            </tr>
                            <tr>
                                <td>
                                    Morbi auctor non ipsum quis ullamcorper. Donec et purus mi. Nunc et auctor lacus.
                                </td>
                            </tr>


                        </table>
                    </td>
                    <td>
                    </td>
                    <td style="background-color: #ffffff;" width="32%">
                        <table>

                            <tr>
                                <td>
                                    <h3>Lorem ipsum </br>dolor sit</h3>
                                </td>

                            </tr>
                            <tr>
                                <td>
                                    <a href=""><img src="https://homepages.cae.wisc.edu/~ece533/images/watch.png" style="height: auto; width: 100%;"
                                            width="1024"></a></td>
                            </tr>
                            <tr>
                                <td>
                                    Morbi auctor non ipsum quis ullamcorper. Donec et purus mi. Nunc et auctor lacus.
                                </td>
                            </tr>


                        </table>
                    </td>
                    <td>
                    </td>
                    <td style="background-color: #ffffff;" width="32%">
                        <table>

                            <tr>
                                <td>
                                    <h3>Lorem ipsum </br>dolor sit</h3>
                                </td>

                            </tr>
                            <tr>
                                <td>
                                    <a href=""><img src="https://homepages.cae.wisc.edu/~ece533/images/watch.png" style="height: auto; width: 100%;"
                                            width="1024"></a></td>
                            </tr>
                            <tr>
                                <td>
                                    Morbi auctor non ipsum quis ullamcorper. Donec et purus mi. Nunc et auctor lacus.
                                </td>
                            </tr>


                        </table>
                    </td>
                </tr>
            </table>
        </td>

    </tr>
    <tr>
        <td height="30">
        </td>
    </tr>
</table>

Answer 1

您是否希望布局仅是三幅还是三幅？还是随着屏幕尺寸的减小，每个容器都可以换行到下一行？

当屏幕缩小时，您当前的代码仅会调整图像，文本和容器的大小。如果只希望容器随着屏幕缩小而包装，则可以使用<div>标签以及float:left;和max-width CSS来实现。

您遇到的主要问题是，每个容器都是一个完全独立的表，每个表都位于另一个表内部的完全独立的表单元格中。

看看这个（运行代码片段并使用“整页”链接对其进行测试）：

.container {
    background-color: #ffffff;
    max-width: 300px;
    float: left;
    margin: 10px;
    padding: 20px;
}

<table border="0" valign="top" cellpadding="10" style="font-family:arial,helvetica,sans-serif;min-width: width 500px;background-color: #f6f4f0;">

  <!-- Title: BEGIN-->
  <tr>
    <td>
      <h2>Title</h2>
    </td>
  </tr>
  <!-- Title: END-->

  <tr>
    <td>
      <div class='container'>
        <h3>Lorem ipsum </br>dolor sit</h3>
        <a href=""><img src="https://homepages.cae.wisc.edu/~ece533/images/watch.png" style="height: auto; width: 100%;" width="1024"></a><br> Morbi auctor non ipsum quis ullamcorper. Donec et purus mi. Nunc et auctor lacus.
      </div>
      <div class='container'>
        <h3>Lorem ipsum </br>dolor sit</h3>
        <a href=""><img src="https://homepages.cae.wisc.edu/~ece533/images/watch.png" style="height: auto; width: 100%;" width="1024"></a><br> Morbi auctor non ipsum quis ullamcorper. Donec et purus mi. Nunc et auctor lacus.
      </div>
      <div class='container'>
        <h3>Lorem ipsum </br>dolor sit</h3>
        <a href=""><img src="https://homepages.cae.wisc.edu/~ece533/images/watch.png" style="height: auto; width: 100%;" width="1024"></a><br> Morbi auctor non ipsum quis ullamcorper. Donec et purus mi. Nunc et auctor lacus.
      </div>
    </td>
  </tr>
  <tr>
    <td height="30">
    </td>
  </tr>
</table>

如果这不是您想要的，请告诉我。

另外，仅供参考，您应该重新考虑代码的几个方面。具体来说，任何时候您指定尺寸时，都应该将单位放在其中。即width="1024" .... 1024什么？如果是像素，请使用1024px。并进一步说明这一点，在<img>元素中，您已经具有显示width: 100%;的CSS。因此，拥有width="1024"也是多余和令人困惑的。

如果屏幕尺寸小于指定值，则将水平块转换为垂直

1 个答案: