2017-05-31 14 views
0

我有一個代碼響應部分的問題。 在桌面上,我有一個從圖像和平板電腦上直接進入圖像的部分,而不是文本。 我想讓它的圖片比手機版圖片下的文字更加完美,並且我無法完成。 我需要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> 
+0

這將有助於看到你正在使用的CSS類定義 – mhatch

回答

0

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

 
\t <!--[if (gte mso 9)|(IE)]> 
 
\t \t <style type="text/css"> 
 
\t \t \t table {border-collapse: collapse !important;} 
 
\t \t </style> 
 
\t <![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 Collumns --> 
 
<tr mc:hideable> 
 
\t <td style="padding-top: 20px;padding-bottom: 60px;padding-right: 0px;padding-left: 0px;text-align:center;font-size:0;" class="two-column"> 
 

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

 
\t \t <div style="width:100%;max-width: 200px;display:inline-block;vertical-align:top;" class="column"> 
 
\t \t \t <table width="100%" style="border-spacing:0;"> 
 
\t \t \t \t <tr> 
 
\t \t \t \t \t <td style="padding-top:10px;padding-bottom:0;padding-right:10px;padding-left:10px;" class="inner"> 
 
\t \t \t \t \t \t <table style="border-spacing:0;width:100%;" class="contents"> 
 
\t \t \t \t \t \t \t <tr> 
 
\t \t \t \t \t \t \t \t <td align="left" valign="top" style="padding-top: 10px;padding-bottom: 0;padding-right: 0;padding-left: 0;" width="200"> 
 
\t \t \t \t \t \t \t \t \t <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"> 
 
\t \t \t \t \t \t \t \t </td> 
 
\t \t \t \t \t \t \t </tr> 
 
\t \t \t \t \t \t </table> 
 
\t \t \t \t \t </td> 
 
\t \t \t \t </tr> 
 
\t \t \t </table> 
 
\t \t </div> 
 

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

 
\t \t <div style="width:100%;max-width: 400px;display:inline-block;vertical-align:top;" class="column"> 
 
\t \t \t <table width="100%" style="border-spacing: 0;"> 
 
\t \t \t \t <tr> 
 
\t \t \t \t \t <td style="padding-top:20px;padding-bottom:0;padding-right:10px;padding-left:10px;font-size:14px;text-align:left;" class="inner"> 
 
\t \t \t \t \t \t 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... 
 
\t \t \t \t \t </td> 
 
\t \t \t \t </tr> 
 
\t \t \t </table> 
 
\t \t </div> 
 

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

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