Как настроить таблицу для просмотра содержимого слева и справа - PullRequest
Новая
       1

Как настроить таблицу для просмотра содержимого слева и справа

0 голосов
/ 05 декабря 2018

У меня есть этот код: 

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
  <head> 
    <title>Mizona</title> 
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> 
    <meta name="viewport" content="width=device-width" /> 
    <style type="text/css">
      #logo img {
        outline: none;
        text-decoration: none;
        -ms-interpolation-mode: bicubic;
        width: auto;
        float: none !important;
        clear: both;
        display: block;
      }

      td {
        word-break:break-word; -webkit-hyphens:auto; -moz-hyphens:auto; hyphens:auto; border-collapse:collapse !important; font-family:'Verdana', 'Arial', sans-serif; font-weight:normal; line-height:19px; font-size:12px; margin:0; padding:0; 
      }

      .desktop-only {
        display: block;
      }

      .mobile-only {
        display: none;
      }

      .no-spacing {
        margin: 0px;
        padding: 0px;
      }

      #cover-content a {
        color: #0EABD6;
      }

      img {
        max-width: 100%;
      }

      #cover-content ul {
        padding-left: 15px;
      }

      #socialicons img {
        outline: none;
        text-decoration: none;
        -ms-interpolation-mode: bicubic;
        width: auto;
        float: none !important;
        clear: both;
        display: inline-block !important;
        border: none;
      }
      #graphic img {
        outline: none;
        text-decoration: none;
        -ms-interpolation-mode: bicubic;
        width: auto;
        max-width: 100%;
        float: none !important;
        clear: both;
        display: inline-block !important;
      }

      .pad-right-5 {
        padding-right: 5px;
      }

      .pad-right-10 {
        padding-right: 10px;
      }

      .pad-right-20 {
        padding-right: 20px;
      }

      .pad-top-10 {
        padding-top: 10px;
      }
      
      .mobile-center {
        text-align: left !important;
      }

      @media only screen and (max-width: 600px) {

        .pad-right-10 {
          padding-right: 0px;
        }

        .desktop-only {
          display: none !important;
        }
        
        .mobile-center {
          text-align: center !important;
        }

        .mobile-only {
          display: block;
        }

        #logo img {
          width: 100% !important;
        }

        #logo-mobile img {
          width: 80% !important;
        }

        #cover-img img {
          max-width: 100%;
        }

        #graphic img {
          width: 100% !important;
          height: auto !important;
        }
        *[class].center {
          text-align:center !important;
          margin:0 auto !important;
        }
        *[class].bottom-pad{ padding-bottom:35px !important;}
        table[class="body"] table.columns td {
          width: auto !important;
        }
        table[class="body"] table.column td .list {
          width: auto !important;
        }
        table[class="body"] img {
          width: auto !important;
          height: auto !important;
          max-width: 100% !important;
        }
        table[class="body"] center {
          min-width: 0 !important;
        }
        table[class="body"] .container {
          width: 100% !important;
        }
        table[class="body"] .row {
          width: 100% !important;
          display: block !important;
        }
        table[class="body"] .wrapper {
          display: block !important;
          padding-right: 0 !important;
        }
        table[class="body"] .columns {
          table-layout: fixed !important;
          float: none !important;
          width: 100% !important;
          padding-right: 0px !important;
          padding-left: 0px !important;
          display: block !important;
        }
        table[class="body"] .column {
          table-layout: fixed !important;
          float: none !important;
          width: 100% !important;
          padding-right: 0px !important;
          padding-left: 0px !important;
          display: block !important;
        }
        table[class="body"] .wrapper.first .columns {
          display: table !important;
        }
        table[class="body"] .wrapper.first .column {
          display: table !important;
        }
        table[class="body"] table.columns td {
          width: 100% !important;
        }
        table[class="body"] table.column td {
          width: 100% !important;
        }

        table[class="body"] .columns td {
          width: 100% !important;
          display: block;
        }
        table[class="body"] .column td {
          width: 100% !important;
          display: block;
        }

        table[class="body"] td.offset-by-one {
          padding-left: 0 !important;
        }
        table[class="body"] td.offset-by-two {
          padding-left: 0 !important;
        }
        table[class="body"] td.offset-by-three {
          padding-left: 0 !important;
        }
        table[class="body"] td.offset-by-four {
          padding-left: 0 !important;
        }
        table[class="body"] td.offset-by-five {
          padding-left: 0 !important;
        }
        table[class="body"] td.offset-by-six {
          padding-left: 0 !important;
        }
        table[class="body"] td.offset-by-seven {
          padding-left: 0 !important;
        }
        table[class="body"] td.offset-by-eight {
          padding-left: 0 !important;
        }
        table[class="body"] td.offset-by-nine {
          padding-left: 0 !important;
        }
        table[class="body"] td.offset-by-ten {
          padding-left: 0 !important;
        }
        table[class="body"] td.offset-by-eleven {
          padding-left: 0 !important;
        }
        table[class="body"] table.columns td.expander {
          width: 1px !important;
        }
        table[class="body"] .right-text-pad {
          padding-left: 10px !important;
        }
        table[class="body"] .text-pad-right {
          padding-left: 10px !important;
        }
        table[class="body"] .left-text-pad {
          padding-right: 10px !important;
        }
        table[class="body"] .text-pad-left {
          padding-right: 10px !important;
        }
        table[class="body"] .hide-for-small {
          display: none !important;
        }
        table[class="body"] .show-for-desktop {
          display: none !important;
        }
        table[class="body"] .show-for-small {
          display: inherit !important;
        }
        table[class="body"] .hide-for-desktop {
          display: inherit !important;
        }

        .social-icon td img {
          width: 40px !important;
          height: 40px !important;
        }
      }
    </style> 
  </head> 
  <body style="width:100% !important; min-width:100%; -webkit-text-size-adjust:100%; -ms-text-size-adjust:100%; text-align:left; line-height:19px; font-size:12px; margin:0; padding:0; background:#eeeeee; "> 
    <table class="body" style="border-spacing:0; border-collapse:collapse;  vertical-align:top; text-align:left; height:100%; width:100%; line-height:19px; font-size:12px; background:#eeeeee; margin:0; padding:0; " bgcolor="#EEEEEE"> 
      <tbody> 
        <tr style="vertical-align:top; text-align:left; padding:0; " align="left"> 
          <td class="center" align="center" valign="top" style="word-break:break-word; -webkit-hyphens:auto; -moz-hyphens:auto; hyphens:auto; border-collapse:collapse !important; vertical-align:top; text-align:center; font-weight:normal; line-height:19px; font-size:12px; margin:0; padding:0; "> 
            <center style="width:100%; min-width:580px; "> 
              <table class="container mktoContainer" id="template-wrapper" style="border-spacing:0; border-collapse:collapse; vertical-align:top; text-align:inherit; width:580px; background:#ffffff; margin:0 auto; padding:0; " bgcolor="#FFFFFF"> 
                <tbody> 
                  <tr class="mktoModule" id="main-header" mktoname="main-header" style="vertical-align:top; text-align:left; padding:0; " align="left"> 
                    <td class="center" style="word-break:break-word; -webkit-hyphens:auto; -moz-hyphens:auto; hyphens:auto; vertical-align:top; text-align:left; margin:0; padding:0;" align="left" valign="top"> 
                      <table class="row" style="border-spacing:0; border-collapse:collapse; vertical-align:top; text-align:left; width:100%; position:relative; display:block; padding:0px; "> 
                        <tbody> 
                          <tr style="vertical-align:top; text-align:left; padding:0; " align="left"> 
                            <td class="wrapper last center" style="word-break:break-word; -webkit-hyphens:auto; -moz-hyphens:auto; hyphens:auto; border-collapse:collapse !important; vertical-align:top; text-align:left; position:relative; color:#555555; line-height:19px; -webkit-transition:font-size 1s ease-in-out !important; font-size:12px; margin:0; padding:0px; " align="left" valign="top"> 
                              <table class="twelve columns center desktop-only" style="border-spacing:0; border-collapse:collapse; vertical-align:top; text-align:left; width:580px; padding:0; display:table !important; "> 
                                <tbody> 
                                  <tr style="vertical-align:top; text-align:left; padding:0; " align="left"> 
                                    <td class="center" style="word-break:break-word; -webkit-hyphens:auto; -moz-hyphens:auto; hyphens:auto; border-collapse:collapse !important; vertical-align:top; text-align:left; color:#555555; line-height:19px; -webkit-transition:font-size 1s ease-in-out !important; font-size:12px; margin:0; padding:0px; " align="left" valign="top"> 
                                      <div class="mktEditable" id="logo" style="" mktoname="logo">
                                        <img src="http://info.eoriginal.com/rs/907-BBE-942/images/nl-header-demand-gen-promo-v2.jpg" alt="eO Logo White.png" constrain="true" imagepreview="false" style="max-width: 600px;" />
                                      </div> </td> 
                                  </tr> 
                                </tbody> 
                              </table> </td> 
                          </tr> 
                        </tbody> 
                      </table> </td> 
                  </tr> 
                  
                  <tr class="mktoModule" id="mod-padding-10" mktoname="mod-padding-10" style="vertical-align:top; text-align:left; padding:0; color: #555555;" align="left"> 
                    <td style="padding: 10px 40px"> </td> 
                  </tr> 

                  <tr class="mktoModule" id="mod-cover" mktoname="mod-cover" style="text-align:left; padding:0; color: #555555;" align="left"> 
                    <td style="padding: 10px 40px"> 
                      <table class="columns" width="100%"> 
                        <tbody>
                          <tr valign="top"> 
                            <td align="left"> 
                              <div class="mktEditable" id="cover-img" mktoname="cover-img">
                                <h4 style="font-family: Verdana; color: #2ea049;"><span style="font-size: 14px;">{{My.Campaign-Headline}}</span></h4> 
                                <table border="0" cellspacing="0" cellpadding="0"> 
                                <tbody> 
                                  <tr> 
                                    <td bgcolor="#0EABD6" style="padding: 12px 18px 12px 18px; border-radius:0px" align="center"> 
                                      <div id="cta2" class="mktEditable" style="" mktoname="cta2">
                                        <p class="no-spacing"><a href="{{my.Fulfillment-CTA-URL}}" target="_blank" style="font-size: 14px; font-weight: normal; color: #ffffff; text-decoration: none; display: inline-block;">Request a Meeting</a></p>
                                      </div> 
                                    </td> 
                                  </tr> 
                                </tbody> 
                              </table>
                              </div> </td> 
                          </tr> 
                        </tbody>
                      </table> </td> 
                  </tr> 
                  
                  <tr class="mktoModule" id="mod-cover" mktoname="mod-cover" style="vertical-align:top; text-align:left; padding:0; color: #555555;" align="right"> 
                    <td style="padding: 10px 40px"> 
                      <table class="columns" width="100%"> 
                        <tbody>
                          <tr valign="top"> 
                            <td align="right"> 
                              <div class="mktEditable" id="cover-img" mktoname="cover-img">
                                <p class="no-spacing"><img src="{{my.Image-Thumb}}" width="250" /></p>
                              </div> </td> 
                          </tr> 
                        </tbody>
                      </table> </td> 
                  </tr> 

                  <tr class="mktoModule" id="mod-content" mktoname="mod-content" style="vertical-align:top; text-align:left; padding:0; color: #555555;"> 
                    <td style="padding: 0px 40px"> 
                      <table class="columns" width="100%"> 
                        <tbody>
                          <tr valign="top"> 
                            <td align="left"> 
                              <div class="mktEditable" id="cover-content" mktoname="cover-content">
                                <p style="font-family: Verdana;"><span style="font-size: 14px;">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</span></p> 
                               
                              </div> <br /> 
                            </td> 
                          </tr> 
                        </tbody>
                      </table> 
                    </td> 
                  </tr> 

                  <tr class="mktoModule" id="mod-cta" mktoname="mod-cta" style="vertical-align:top; padding:0;"> 
                    <td style="padding: 0px 40px;" align="center"> 
                      <table border="0" cellspacing="0" cellpadding="0"> 
                        <tbody> 
                          <tr> 
                            <td align="center"> 
                              <table border="0" cellspacing="0" cellpadding="0"> 
                                <tbody> 
                                  <tr> 
                                    <td bgcolor="#0EABD6" style="padding: 12px 18px 12px 18px; border-radius:0px" align="center"> 
                                      <div id="cta2" class="mktEditable" style="" mktoname="cta2">
                                        <p class="no-spacing"><a href="{{my.Fulfillment-CTA-URL}}" target="_blank" style="font-size: 14px; font-weight: normal; color: #ffffff; text-decoration: none; display: inline-block;">Request a Meeting</a></p>
                                      </div> 
                                    </td> 
                                  </tr> 
                                </tbody> 
                              </table> <br />
                            </td> 
                          </tr> 
                        </tbody> 
                      </table> 
                    </td> 
                  </tr> 

                  <tr class="mktoModule" id="social" mktoname="social" bgcolor="#2EA049"> 
                    <td class="two-column" style="font-size: 0; text-align: center;"> 
                     
                      <div class="rcolumn" style="width: 100%; max-width: 295px; display: inline-block; vertical-align: top;"> 
                        <table width="100%"> 
                          <tbody>
                            <tr> 
                              <td class="inner mobile-center" style="font-size: 10px; color: #FFFFFF; padding: 20px 40px;"> <a href="http://go.eoriginal.com/JB3eB005bE0cHk00O000000" target="_blank" style="text-decoration:none; color:#ffffff">eOriginal.com</a> </td> 
                            </tr> 
                          </tbody>
                        </table> 
                      </div> 
                      
                      <div class="rcolumn" style="width: 100%; max-width: 295px; display: inline-block; vertical-align: top;"> 
                        <table width="100%"> 
                          <tbody>
                            <tr> 
                              <td class="inner" style="font-size: 10px; color: #FFFFFF; padding: 10px 40px;"> 
                                <table align="center" border="0" cellpadding="0" cellspacing="0" style="width: 100%"> 
                                  <tbody> 
                                    <tr> 
                                      <td align="left" valign="middle" width="50"><a href="https://twitter.com/eOriginal/" style="text-decoration:none;" target="_blank"><img alt="Twitter" src="https://eoriginal.wise-portal.com/newsletter/public/social-twitter-icon.png" style="color: #FFFFFF; font-size: 12px; " width="40" height="40" /></a></td> 
                                      <td align="left" valign="middle" width="50"><a href="https://www.linkedin.com/company/57606" style="text-decoration:none;" target="_blank"><img alt="LinkedIn" src="https://eoriginal.wise-portal.com/newsletter/public/social-linkedin-icon.png" style="color: #FFFFFF; font-size: 12px; " width="40" height="40" /></a></td> 
                                      <td align="left" valign="middle" width="50"><a href="http://www.facebook.com/pages/eOriginal/58932553996/" style="text-decoration:none;" target="_blank"><img alt="Facebook" src="https://eoriginal.wise-portal.com/newsletter/public/social-facebook-icon.png" style="color: #FFFFFF; font-size: 12px;" width="40" height="40" /></a></td> 
                                      <td align="left" valign="middle" width="50"><a href="https://www.eoriginal.com/eo-insights/" style="text-decoration:none;" target="_blank"><img alt="Blog" src="https://eoriginal.wise-portal.com/newsletter/public/social-blog-icon.png" style="color: #FFFFFF; font-size: 12px; " width="40" height="40" /></a></td> 
                                    </tr> 
                                  </tbody> 
                                </table> </td> 
                            </tr> 
                          </tbody>
                        </table> 
                      </div> 
                       </td> 
                  </tr> 
                  <tr class="mktoModule" id="footer" mktoname="footer" bgcolor="#353937"> 
                    <td class="two-column" style="font-size: 0; text-align: center;"> 
                     
                      <div class="rcolumn" style="width: 100%; max-width: 295px; display: inline-block; vertical-align: top;"> 
                        <table width="100%"> 
                          <tbody>
                            <tr> 
                              <td class="inner mobile-center" style="font-size: 10px; color: #FFFFFF; padding: 10px 40px;"> <img src="http://info.eoriginal.com/rs/907-BBE-942/images/nl-footer-logo-v2.2.png" width="200" /><br /><br /> <span>© 2018 eOriginal, Inc. All rights reserved.</span> </td> 
                            </tr> 
                          </tbody>
                        </table> 
                      </div> 
                      <!--[if (gte mso 9)|(IE)]>
                        </td><td width="50%" valign="top">
                        <![endif]--> 
                      <div class="rcolumn" style="width: 100%; max-width: 295px; display: inline-block; vertical-align: top;"> 
                        <table width="100%"> 
                          <tbody>
                            <tr> 
                              <td class="inner mobile-center" style="font-size: 10px; color: #FFFFFF; padding: 10px 40px;"> The Warehouse at Camden Yards<br /> 351 W. Camden St., Suite 800<br /> Baltimore, MD 21201<br /><br /> SALES <span style="color: #2EA049">1-866-935-1776</span><br />SUPPORT <span style="color: #2EA049">1-866-364-3578</span> </td> 
                            </tr> 
                          </tbody>
                        </table> 
                      </div> 
                      </td> 
                  </tr> 
                </tbody> 
              </table> 
            </center> </td> 
        </tr> 
      </tbody> 
    </table>  
  </body>
</html>

Исходя из этого кода выше, я получаю следующее:

enter image description here

Так какВы можете увидеть тему, и кнопка будет отображаться над картинкой.Но я пытаюсь добиться того, чтобы тема / кнопка и изображение отображались рядом друг с другом следующим образом:

enter image description here

Как мне добитьсяэтот?Если возможно, я бы хотел соотношение 60 к 40.40 - это изображение.

Ответы [ 2 ]

0 голосов
/ 05 декабря 2018

Здесь задайте оба значения td в одном значении tr и задайте ширину для первого значения td 

#logo img {
        outline: none;
        text-decoration: none;
        -ms-interpolation-mode: bicubic;
        width: auto;
        float: none !important;
        clear: both;
        display: block;
      }

      td {
        word-break:break-word; -webkit-hyphens:auto; -moz-hyphens:auto; hyphens:auto; border-collapse:collapse !important; font-family:'Verdana', 'Arial', sans-serif; font-weight:normal; line-height:19px; font-size:12px; margin:0; padding:0; 
      }

      .desktop-only {
        display: block;
      }

      .mobile-only {
        display: none;
      }

      .no-spacing {
        margin: 0px;
        padding: 0px;
      }

      #cover-content a {
        color: #0EABD6;
      }

      img {
        max-width: 100%;
      }

      #cover-content ul {
        padding-left: 15px;
      }

      #socialicons img {
        outline: none;
        text-decoration: none;
        -ms-interpolation-mode: bicubic;
        width: auto;
        float: none !important;
        clear: both;
        display: inline-block !important;
        border: none;
      }
      #graphic img {
        outline: none;
        text-decoration: none;
        -ms-interpolation-mode: bicubic;
        width: auto;
        max-width: 100%;
        float: none !important;
        clear: both;
        display: inline-block !important;
      }

      .pad-right-5 {
        padding-right: 5px;
      }

      .pad-right-10 {
        padding-right: 10px;
      }

      .pad-right-20 {
        padding-right: 20px;
      }

      .pad-top-10 {
        padding-top: 10px;
      }
      
      .mobile-center {
        text-align: left !important;
      }

      @media only screen and (max-width: 600px) {

        .pad-right-10 {
          padding-right: 0px;
        }

        .desktop-only {
          display: none !important;
        }
        
        .mobile-center {
          text-align: center !important;
        }

        .mobile-only {
          display: block;
        }

        #logo img {
          width: 100% !important;
        }

        #logo-mobile img {
          width: 80% !important;
        }

        #cover-img img {
          max-width: 100%;
        }

        #graphic img {
          width: 100% !important;
          height: auto !important;
        }
        *[class].center {
          text-align:center !important;
          margin:0 auto !important;
        }
        *[class].bottom-pad{ padding-bottom:35px !important;}
        table[class="body"] table.columns td {
          width: auto !important;
        }
        table[class="body"] table.column td .list {
          width: auto !important;
        }
        table[class="body"] img {
          width: auto !important;
          height: auto !important;
          max-width: 100% !important;
        }
        table[class="body"] center {
          min-width: 0 !important;
        }
        table[class="body"] .container {
          width: 100% !important;
        }
        table[class="body"] .row {
          width: 100% !important;
          display: block !important;
        }
        table[class="body"] .wrapper {
          display: block !important;
          padding-right: 0 !important;
        }
        table[class="body"] .columns {
          table-layout: fixed !important;
          float: none !important;
          width: 100% !important;
          padding-right: 0px !important;
          padding-left: 0px !important;
          display: block !important;
        }
        table[class="body"] .column {
          table-layout: fixed !important;
          float: none !important;
          width: 100% !important;
          padding-right: 0px !important;
          padding-left: 0px !important;
          display: block !important;
        }
        table[class="body"] .wrapper.first .columns {
          display: table !important;
        }
        table[class="body"] .wrapper.first .column {
          display: table !important;
        }
        table[class="body"] table.columns td {
          width: 100% !important;
        }
        table[class="body"] table.column td {
          width: 100% !important;
        }

        table[class="body"] .columns td {
          width: 100% !important;
          display: block;
        }
        table[class="body"] .column td {
          width: 100% !important;
          display: block;
        }

        table[class="body"] td.offset-by-one {
          padding-left: 0 !important;
        }
        table[class="body"] td.offset-by-two {
          padding-left: 0 !important;
        }
        table[class="body"] td.offset-by-three {
          padding-left: 0 !important;
        }
        table[class="body"] td.offset-by-four {
          padding-left: 0 !important;
        }
        table[class="body"] td.offset-by-five {
          padding-left: 0 !important;
        }
        table[class="body"] td.offset-by-six {
          padding-left: 0 !important;
        }
        table[class="body"] td.offset-by-seven {
          padding-left: 0 !important;
        }
        table[class="body"] td.offset-by-eight {
          padding-left: 0 !important;
        }
        table[class="body"] td.offset-by-nine {
          padding-left: 0 !important;
        }
        table[class="body"] td.offset-by-ten {
          padding-left: 0 !important;
        }
        table[class="body"] td.offset-by-eleven {
          padding-left: 0 !important;
        }
        table[class="body"] table.columns td.expander {
          width: 1px !important;
        }
        table[class="body"] .right-text-pad {
          padding-left: 10px !important;
        }
        table[class="body"] .text-pad-right {
          padding-left: 10px !important;
        }
        table[class="body"] .left-text-pad {
          padding-right: 10px !important;
        }
        table[class="body"] .text-pad-left {
          padding-right: 10px !important;
        }
        table[class="body"] .hide-for-small {
          display: none !important;
        }
        table[class="body"] .show-for-desktop {
          display: none !important;
        }
        table[class="body"] .show-for-small {
          display: inherit !important;
        }
        table[class="body"] .hide-for-desktop {
          display: inherit !important;
        }

        .social-icon td img {
          width: 40px !important;
          height: 40px !important;
        }
      }
  <table class="body" style="border-spacing:0; border-collapse:collapse;  vertical-align:top; text-align:left; height:100%; width:100%; line-height:19px; font-size:12px; background:#eeeeee; margin:0; padding:0; " bgcolor="#EEEEEE"> 
      <tbody> 
        <tr style="vertical-align:top; text-align:left; padding:0; " align="left"> 
          <td class="center" align="center" valign="top" style="word-break:break-word; -webkit-hyphens:auto; -moz-hyphens:auto; hyphens:auto; border-collapse:collapse !important; vertical-align:top; text-align:center; font-weight:normal; line-height:19px; font-size:12px; margin:0; padding:0; "> 
            <center style="width:100%; min-width:580px; "> 
              <table class="container mktoContainer" id="template-wrapper" style="border-spacing:0; border-collapse:collapse; vertical-align:top; text-align:inherit; width:580px; background:#ffffff; margin:0 auto; padding:0; " bgcolor="#FFFFFF"> 
                <tbody> 
                  <tr class="mktoModule" id="main-header" mktoname="main-header" style="vertical-align:top; text-align:left; padding:0; " align="left"> 
                    <td class="center" style="word-break:break-word; -webkit-hyphens:auto; -moz-hyphens:auto; hyphens:auto; vertical-align:top; text-align:left; margin:0; padding:0;" align="left" valign="top"> 
                      <table class="row" style="border-spacing:0; border-collapse:collapse; vertical-align:top; text-align:left; width:100%; position:relative; display:block; padding:0px; "> 
                        <tbody> 
                          <tr style="vertical-align:top; text-align:left; padding:0; " align="left"> 
                            <td class="wrapper last center" style="word-break:break-word; -webkit-hyphens:auto; -moz-hyphens:auto; hyphens:auto; border-collapse:collapse !important; vertical-align:top; text-align:left; position:relative; color:#555555; line-height:19px; -webkit-transition:font-size 1s ease-in-out !important; font-size:12px; margin:0; padding:0px; " align="left" valign="top"> 
                              <table class="twelve columns center desktop-only" style="border-spacing:0; border-collapse:collapse; vertical-align:top; text-align:left; width:580px; padding:0; display:table !important; "> 
                                <tbody> 
                                  <tr style="vertical-align:top; text-align:left; padding:0; " align="left"> 
                                    <td class="center" style="word-break:break-word; -webkit-hyphens:auto; -moz-hyphens:auto; hyphens:auto; border-collapse:collapse !important; vertical-align:top; text-align:left; color:#555555; line-height:19px; -webkit-transition:font-size 1s ease-in-out !important; font-size:12px; margin:0; padding:0px; " align="left" valign="top"> 
                                      <div class="mktEditable" id="logo" style="" mktoname="logo">
                                        <img src="http://info.eoriginal.com/rs/907-BBE-942/images/nl-header-demand-gen-promo-v2.jpg" alt="eO Logo White.png" constrain="true" imagepreview="false" style="max-width: 600px;" />
                                      </div> </td> 
                                  </tr> 
                                </tbody> 
                              </table> </td> 
                          </tr> 
                        </tbody> 
                      </table> </td> 
                  </tr> 
                  
                  <tr class="mktoModule" id="mod-padding-10" mktoname="mod-padding-10" style="vertical-align:top; text-align:left; padding:0; color: #555555;" align="left"> 
                    <td style="padding: 10px 40px"> </td> 
                  </tr> 

                  <tr class="mktoModule" id="mod-cover" mktoname="mod-cover" style="text-align:left; padding:0; color: #555555;" align="left"> 
                    <td style="padding: 10px 40px"> 
                      <table class="columns" width="100%"> 
                        <tbody>
                          <tr valign="top"> 
                            <td align="left" style="width:60%;"> 
                              <div class="mktEditable" id="cover-img" mktoname="cover-img">
                                <h4 style="font-family: Verdana; color: #2ea049;"><span style="font-size: 14px;">{{My.Campaign-Headline}}</span></h4> 
                                <table border="0" cellspacing="0" cellpadding="0"> 
                                <tbody> 
                                  <tr> 
                                    <td bgcolor="#0EABD6" style="padding: 12px 18px 12px 18px; border-radius:0px;" align="center"> 
                                      <div id="cta2" class="mktEditable" style="" mktoname="cta2">
                                        <p class="no-spacing"><a href="{{my.Fulfillment-CTA-URL}}" target="_blank" style="font-size: 14px; font-weight: normal; color: #ffffff; text-decoration: none; display: inline-block;">Request a Meeting</a></p>
                                      </div> 
                                    
                                  </tr> 
                                </tbody> 
                              </table>
                              </div> </td> 
                              </td> 
                                     <td align="right"> 
                              <div class="mktEditable" id="cover-img" mktoname="cover-img">
                                <p class="no-spacing"><img src="https://www.google.co.in/images/branding/googlelogo/1x/googlelogo_color_272x92dp.png" width="250" /></p>
                              </div> </td> 
                          </tr> 
                        </tbody>
                      </table> </td> 
                  </tr> 
                  
                  <tr class="mktoModule" id="mod-cover" mktoname="mod-cover" style="vertical-align:top; text-align:left; padding:0; color: #555555;" align="right"> 
                    <td style="padding: 10px 40px"> 
                      <table class="columns" width="100%"> 
                        <tbody>
                          <tr valign="top"> 
                           
                          </tr> 
                        </tbody>
                      </table> </td> 
                  </tr> 

                  <tr class="mktoModule" id="mod-content" mktoname="mod-content" style="vertical-align:top; text-align:left; padding:0; color: #555555;"> 
                    <td style="padding: 0px 40px"> 
                      <table class="columns" width="100%"> 
                        <tbody>
                          <tr valign="top"> 
                            <td align="left"> 
                              <div class="mktEditable" id="cover-content" mktoname="cover-content">
                                <p style="font-family: Verdana;"><span style="font-size: 14px;">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</span></p> 
                               
                              </div> <br /> 
                            </td> 
                          </tr> 
                        </tbody>
                      </table> 
                    </td> 
                  </tr> 

                  <tr class="mktoModule" id="mod-cta" mktoname="mod-cta" style="vertical-align:top; padding:0;"> 
                    <td style="padding: 0px 40px;" align="center"> 
                      <table border="0" cellspacing="0" cellpadding="0"> 
                        <tbody> 
                          <tr> 
                            <td align="center"> 
                              <table border="0" cellspacing="0" cellpadding="0"> 
                                <tbody> 
                                  <tr> 
                                    <td bgcolor="#0EABD6" style="padding: 12px 18px 12px 18px; border-radius:0px" align="center"> 
                                      <div id="cta2" class="mktEditable" style="" mktoname="cta2">
                                        <p class="no-spacing"><a href="{{my.Fulfillment-CTA-URL}}" target="_blank" style="font-size: 14px; font-weight: normal; color: #ffffff; text-decoration: none; display: inline-block;">Request a Meeting</a></p>
                                      </div> 
                                    </td> 
                                  </tr> 
                                </tbody> 
                              </table> <br />
                            </td> 
                          </tr> 
                        </tbody> 
                      </table> 
                    </td> 
                  </tr> 

                  <tr class="mktoModule" id="social" mktoname="social" bgcolor="#2EA049"> 
                    <td class="two-column" style="font-size: 0; text-align: center;"> 
                     
                      <div class="rcolumn" style="width: 100%; max-width: 295px; display: inline-block; vertical-align: top;"> 
                        <table width="100%"> 
                          <tbody>
                            <tr> 
                              <td class="inner mobile-center" style="font-size: 10px; color: #FFFFFF; padding: 20px 40px;"> <a href="http://go.eoriginal.com/JB3eB005bE0cHk00O000000" target="_blank" style="text-decoration:none; color:#ffffff">eOriginal.com</a> </td> 
                            </tr> 
                          </tbody>
                        </table> 
                      </div> 
                      
                      <div class="rcolumn" style="width: 100%; max-width: 295px; display: inline-block; vertical-align: top;"> 
                        <table width="100%"> 
                          <tbody>
                            <tr> 
                              <td class="inner" style="font-size: 10px; color: #FFFFFF; padding: 10px 40px;"> 
                                <table align="center" border="0" cellpadding="0" cellspacing="0" style="width: 100%"> 
                                  <tbody> 
                                    <tr> 
                                      <td align="left" valign="middle" width="50"><a href="https://twitter.com/eOriginal/" style="text-decoration:none;" target="_blank"><img alt="Twitter" src="https://eoriginal.wise-portal.com/newsletter/public/social-twitter-icon.png" style="color: #FFFFFF; font-size: 12px; " width="40" height="40" /></a></td> 
                                      <td align="left" valign="middle" width="50"><a href="https://www.linkedin.com/company/57606" style="text-decoration:none;" target="_blank"><img alt="LinkedIn" src="https://eoriginal.wise-portal.com/newsletter/public/social-linkedin-icon.png" style="color: #FFFFFF; font-size: 12px; " width="40" height="40" /></a></td> 
                                      <td align="left" valign="middle" width="50"><a href="http://www.facebook.com/pages/eOriginal/58932553996/" style="text-decoration:none;" target="_blank"><img alt="Facebook" src="https://eoriginal.wise-portal.com/newsletter/public/social-facebook-icon.png" style="color: #FFFFFF; font-size: 12px;" width="40" height="40" /></a></td> 
                                      <td align="left" valign="middle" width="50"><a href="https://www.eoriginal.com/eo-insights/" style="text-decoration:none;" target="_blank"><img alt="Blog" src="https://eoriginal.wise-portal.com/newsletter/public/social-blog-icon.png" style="color: #FFFFFF; font-size: 12px; " width="40" height="40" /></a></td> 
                                    </tr> 
                                  </tbody> 
                                </table> </td> 
                            </tr> 
                          </tbody>
                        </table> 
                      </div> 
                       </td> 
                  </tr> 
                  <tr class="mktoModule" id="footer" mktoname="footer" bgcolor="#353937"> 
                    <td class="two-column" style="font-size: 0; text-align: center;"> 
                     
                      <div class="rcolumn" style="width: 100%; max-width: 295px; display: inline-block; vertical-align: top;"> 
                        <table width="100%"> 
                          <tbody>
                            <tr> 
                              <td class="inner mobile-center" style="font-size: 10px; color: #FFFFFF; padding: 10px 40px;"> <img src="http://info.eoriginal.com/rs/907-BBE-942/images/nl-footer-logo-v2.2.png" width="200" /><br /><br /> <span>© 2018 eOriginal, Inc. All rights reserved.</span> </td> 
                            </tr> 
                          </tbody>
                        </table> 
                      </div> 
                      <!--[if (gte mso 9)|(IE)]>
                        </td><td width="50%" valign="top">
                        <![endif]--> 
                      <div class="rcolumn" style="width: 100%; max-width: 295px; display: inline-block; vertical-align: top;"> 
                        <table width="100%"> 
                          <tbody>
                            <tr> 
                              <td class="inner mobile-center" style="font-size: 10px; color: #FFFFFF; padding: 10px 40px;"> The Warehouse at Camden Yards<br /> 351 W. Camden St., Suite 800<br /> Baltimore, MD 21201<br /><br /> SALES <span style="color: #2EA049">1-866-935-1776</span><br />SUPPORT <span style="color: #2EA049">1-866-364-3578</span> </td> 
                            </tr> 
                          </tbody>
                        </table> 
                      </div> 
                      </td> 
                  </tr> 
                </tbody> 
              </table> 
            </center> </td> 
        </tr> 
      </tbody> 
    </table>
0 голосов
/ 05 декабря 2018

Есть много способов достичь того, что вам нужно:

  • плавать изображение справа от текста (style="float:right;")
  • использовать библиотеку сетки CSS (как Bootstrap's).Предполагая, что доступно 12 столбцов: используйте col-7 для текста и col-5 для изображения
  • , поместите текст и изображение в соседние ячейки таблицы в одну строку;установите ширину этих ячеек на 60% и 40% соответственно

и т. д.

Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.

Нет похожих вопросов

...