个人中心
gpt4 book ai didi

html - 响应式电子邮件代码问题

转载 作者：行者123 更新时间：2023-11-28 03:39:46 26 4
gpt4 key购买 nike

我对代码的响应部分有疑问。在桌面上，我有一个部分是图像而不是文本，在平板电脑上也是如此。我想让它的图像比移动版本图像下的文本更重要，但我无法完成。我需要 CSS 方面的帮助，以便为移动设备做好准备。

代码如下:

<table class="table600" width="712" border="0" align="center"  cellpadding="0" cellspacing="0">
    <div id="slike">
        <tr>
            <td align="left">
                <img src="img/img1.jpeg" class="img-responsive" width="330">
            </td>
            <td>
                <p style="font-family: 'Open Sans', Myriad Pro, sans-serif; font-size:24px; color:#606060; line-height:28px;letter-spacing: 2px;">
                    Data security and erasure</p>
                <p style="font-family: 'Open Sans', Lato, sans-serif; font-size:12px; color:#898989; line-height:18px;letter-spacing: 2px;">When a product comes into our possession our technicians start by wiping the hard drive(s) of any and all data. Thereafter, we install the latest operating system so that the product is ready to be used as soon as the new owner gets hold of it. As an extra service we offer to make a DOE 3-pass secure erase for a minor extra cost.</p>

            </td>  
        </tr>
    </div>   
    <div id="slike">
        <tr>
            <td>
                <p style="font-family: 'Open Sans', Myriad Pro, sans-serif; font-size:24px; color:#606060; line-height:28px;letter-spacing: 2px;">
                    We do the logistic</p>
                <p style="font-family: 'Open Sans', Lato, sans-serif; font-size:12px; color:#898989; line-height:18px;letter-spacing: 2px;">To make the sell process as smooth as possible for our customers we have decided to pay our customers postage fee. Once the devices is packed securely we book a collection using our standard logistic partner. The devices will be receiving an unique order number which you can follow during the whole process.</p>

            </td>
            <td align="right">
                <img src="img/img2.jpeg" class="img-responsive" width="330">
            </td>
        </tr>
    </div>
    <div >
        <tr id="slike"> 
            <td align="left">
                <img src="img/img3.jpeg" class="img-responsive" width="330">
            </td>
            <td>
                <p style="font-family: 'Open Sans', Myriad Pro, sans-serif; font-size:24px; color:#606060; line-height:28px;letter-spacing: 2px;">
                    Eco-friendly and money saving</p>
                <p style="font-family: 'Open Sans', Lato, sans-serif; font-size:12px; color:#898989; line-height:18px;letter-spacing: 2px;">Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet. Dolore magna aliquam erat volutpat. Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet.
                </p>


            </td>  
        </tr>
    </div>
</table>

最佳答案 

<html>
  <head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
    <!--[if !mso]><!-->
        <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <!--<![endif]-->
    <meta name="viewport" content="width=device-width; initial-scale=1.0; maximum-scale=1.0;">
    <title>Title</title>

    <!--[if (gte mso 9)|(IE)]>
        <style type="text/css">
            table {border-collapse: collapse !important;}
        </style>
    <![endif]-->
  </head>
  <body style="Margin:0;padding-top:50px;padding-bottom:50px;padding-right:0;padding-left:0;min-width:100%;background-color:#ffffff;">
    <center class="wrapper" style="width:100%;table-layout:fixed;">
      <div class="webkit" style="max-width:640px;">
        <table class="outer" align="center" style="border-spacing:0;font-family:sans-serif;color:#4A4A4A;margin:0 auto;width:100%;max-width:640px;">
          <tr>
            <td align="center" valign="top" style="border:1px solid #E5E5E5;">
              <table border="0" cellpadding="0" cellspacing="0" width="100%" style="height:100%;">
                <tr>
                  <td align="center" valign="top">
                    <table border="0" cellpadding="0" cellspacing="0" width="100%">
                      <tr>
                        <td align="center" bgcolor="#FFFFFF" valign="top" width="100%" style="padding-left: 20px; padding-right: 20px;">

<!-- // 2 columns -->
<tr mc:hideable>
    <td style="padding-top: 20px;padding-bottom: 60px;padding-right: 0px;padding-left: 0px;text-align:center;font-size:0;" class="two-column">

        <!--[if (gte mso 9)|(IE)]>
            <table width="100%" style="border-spacing:0;font-family:sans-serif;color:#4A4A4A;">
            <tr>
            <td width="50%" valign="top" style="padding-top:0;padding-bottom:0;padding-right:0;padding-left:0;">
        <![endif]-->

        <div style="width:100%;max-width: 200px;display:inline-block;vertical-align:top;" class="column">
            <table width="100%" style="border-spacing:0;">
                <tr>
                    <td style="padding-top:10px;padding-bottom:0;padding-right:10px;padding-left:10px;" class="inner">
                        <table style="border-spacing:0;width:100%;" class="contents">
                            <tr>
                                <td align="left" valign="top" style="padding-top: 10px;padding-bottom: 0;padding-right: 0;padding-left: 0;" width="200">
                                    <img mc:edit="imagetip" width="160" align="absbottom" style="border-width:0;width:100%;max-width:180px;height:auto; display:block; float:right;Margin: 0 0 20px 0;font-size: 12px;" alt="Image tiltle" src="http://placehold.it/180x100">
                                </td>
                            </tr>
                        </table>
                    </td>
                </tr>
            </table>
        </div>

        <!--[if (gte mso 9)|(IE)]>
            </td><td width="50%" valign="top" style="padding-top:0;padding-bottom:0;padding-right:0;padding-left:0;">
        <![endif]-->

        <div style="width:100%;max-width: 400px;display:inline-block;vertical-align:top;" class="column">
            <table width="100%" style="border-spacing: 0;">
                <tr>
                    <td style="padding-top:20px;padding-bottom:0;padding-right:10px;padding-left:10px;font-size:14px;text-align:left;" class="inner">
                        Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nisi dis neque nonummy semper. Rutrum ultricies libero natoque ornare habitasse leo: Libero ultrices faucibus tellus... Magnis placerat accumsan fermentum... Augue viverra montes dictumst luctus mi iaculis duis... Feugiat vivamus rhoncus fusce lobortis pede ultrices platea... 
                    </td>
                </tr>
            </table>
        </div>

        <!--[if (gte mso 9)|(IE)]>
            </td>
            </tr>
            </table>
        <![endif]-->

    </td>
</tr>
<!-- 2 columns \\ -->
                                                </td>
                                            </tr>
                                        </table>
                                    </td>
                                </tr>
                            </table>
                        </td>
                    </tr>
                </table>
            </div>
        </center>
    </body>
</html>

关于html - 响应式电子邮件代码问题，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/44285654/

26 4 0
文章推荐： c++ - 在 Qt 中使用 std::tr1::normal_distribution
文章推荐： javascript - 在 Javascript 中解构对象字段并计算总和
文章推荐： c++ - 使用 QStateMachine 在菜单屏幕之间转换
文章推荐： javascript - 在javascript中加载选定的本地文件后如何将行存储到数组中
行者123
个人简介

我是一名优秀的程序员,十分优秀！

滴滴打车优惠券免费领取
滴滴打车优惠券
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com