Table 使用 HTML 和 CSS 堆叠和调整大小

Question

我正在尝试使用 HTML 和 CSS 构建一个相当简单的电子邮件，它可以是 300 像素宽或 600 像素宽，具体取决于以下@media：

@media only screen and (max-width: 599px) { /* Mobiles etc */ }
@media only screen and (min-width: 600px) { /* Tablets or Desktops etc */ }

然后我有一个 table，里面有两个 table，只要我将浏览器的大小调整到小于 600px，它就会堆叠，这很好。我通过以下方式完成了此操作：

  @media only screen and (max-width: 599px) {  
  .floatLeftResponse{
    width:100% !important;
    float:left;
  }

但是，我似乎无法让所有内容正常工作，因为我的整封电子邮件要么由一个 table 600 像素宽，要么由两个 50% table 组成。在某些情况下，我希望右侧位于左侧之上，反之亦然。

然后我们有 600px 宽的图像，它也应该缩小到 300px 宽。

因为我对这一切还很陌生，所以我一直在谷歌搜索，每次我让一个部分工作时，我都会以某种方式设法破坏其他部分。伙计们，我们将不胜感激 :)

Answer 1

设法通过根据我所知道的从头开始构建整个电子邮件而不是使用在线指南来解决这个问题： http://jsfiddle.net/hirenshah/k7wg3yry/4/

<body bgcolor="#C0C0C0">
<table class="container">
    <tr>
        <td>
            <!-- Header Table Start -->
            <table dir="rtl" width="100%">
                <tr>
                    <td width="35%" dir="ltr" class="table">RIGHT HAND SIDE LOGO</td>
                    <td width="65%" dir="ltr" class="table">Quote Number: 1234567890</td>
                </tr>
            </table>
            <!-- Header Table End -->
            <!-- Image Banner Table Start -->
            <table class="center">
                <tr>
                    <td>
                        <img src="http://effervescence.me/wp-content/uploads/2014/01/UnencumberedSharingCircleBanner600px.jpg" class="resize" />
                    </td>
                </tr>
            </table>
            <!-- Image Banner Table End -->
            <!-- Intro Text Start -->
            <table>
                <tr>
                    <td>Dear Mr Smith,
                        <br>We are a recognized leader in enterprise engagement and customer experience management and today are proud to count some of the world's largest brands as our customers.
                        <br>
                        <br>The inspiration for our company name is the Thunderhead cloud - a type of storm cloud that signals disruption and turbulence. It's symbolic of the change we bring to enterprise software; a cloud based solution provider leading from the front to revolutionize customer engagement and design-led ease of use.
                        <br>
                        <br>Since launching in 2004, we have become an acknowledged leader in our market, with operations in three continents, and a client base that includes some of the best known companies in the financial services and investment banking world.
                        <br>
                        <br>We help our customers succeed by providing them with innovative technology solutions that enable them to more effectively communicate, collaborate and engage with their customers, employees and partners.
                            </td>
                </tr>
            </table>
            <!-- Intro Text End -->
            <!-- Header Table Start -->
            <table width="100%">
                <tr>
                    <td width="50%" class="table">
                        <p>You have bought stuff</p>
                    </td>
                    <td width="50%" class="table">
                        <p>But you can also buy this stuff</p>
                    </td>
                </tr>
            </table>
            <!-- Header Table End -->
        </td>
    </tr>
</table>

    /* Mobile Devices */
 @media only screen and (max-width: 599px) {
    .table {
        display:block;
        width:100%;
    }
    .container {
        width:300px;
        !important max-width:300px;
        !important
    }
    img.resize {
        max-width:300px;
        height:auto;
    }
}
/* All Other Devices */
 .container {
    background-color: white;
    margin-left: auto;
    margin-right: auto;
    max-width:600px;
    padding:10px;
    border-radius: 20px 20px 20px 0px;
}
.center {
    margin-left: auto;
    margin-right: auto;
}
.left {
    text-align: left;
}
.right {
    text-align: right;
}

Table 使用 HTML 和 CSS 堆叠和调整大小

Table Stacking and Resizing with HTML and CSS

html

css

scaling

media-queries