Question

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

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

然后我有一个包含两个表的表，只要我将浏览器的大小调整为小于600px就会堆叠，这很好。我这样做了：

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

但是，我似乎无法使一切正常工作，因为我的整个电子邮件要么由一个600px宽的表组成，要么由两个50％的表组成。在某些情况下，我希望右侧位于左上方，反之亦然。

然后我们有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;
}

表格堆叠和HTML和CSS调整大小

1 个答案: