Почему моя колонка максимизируется при ширине 282 пикселей вместо 660 пикселей?

Мне нужна эта колонка для полной ширины, которая составляет 660 пикселей.Почему моя колонка максимизируется при ширине 282 пикселей вместо 660 пикселей?

Другие разделы работают правильно, но я удалил их из приведенного ниже кода, чтобы сделать блок кода «минимальным». Я не могу определить разницу между функциональными разделами и этим нерабочим разделом. Мне нужно исправить это первым (самым фундаментальным/основным способом обеспечения совместимости с почтовым клиентом), и мне нужно понять эту секунду.

Нет CSS с указанием определенной ширины или процента.
Не существует родительского элемента, указывающего эту ширину.
Другие разделы, которые на мой взгляд выглядят полностью идентичными, соответствуют полной ширине.
Проверка на Chrome показывает ширину 282, но не указывает, почему. (screenshot)
Даже когда я установить ширину с HTML до 100% или 660, браузер игнорирует это и держит его на 282.
Если одна непрерывная строка текста выходит за пределы 282, весь шаблон вытягивает горизонтально, чтобы поддерживать колонку пропорционально.

Ниже представлен весь незавершенный шаблон. Существует много дополнительных CSS, которые я буду отбирать позже с проверкой Inspect, но нет никаких указаний на то, что любой из этих стилей касается этих TD.

Документ предназначен для шаблона электронной почты с одним столбцом.

Есть ли у кого-нибудь идеи?

/* General Formatting */ 
 

 
body { 
 
    margin: 0 !important; 
 
    padding: 0; 
 
} 
 
table { 
 
    border-spacing: 0; 
 
    color: #333333; 
 
    margin: 0; 
 
    padding: 0; 
 
} 
 
td { 
 
    padding: 0; 
 
} 
 
img { 
 
    border: 0; 
 
} 
 
div[style*="margin: 16px 0"] { 
 
    margin: 0 !important; 
 
} 
 
.wrapper { 
 
    width: 100%; 
 
    table-layout: fixed; 
 
    -webkit-text-size-adjust: 100%; 
 
    -ms-text-size-adjust: 100%; 
 
} 
 
.webkit { 
 
    max-width: 660px; 
 
    Margin: 0 auto; 
 
} 
 
.outer { 
 
    Margin: 0 auto; 
 
    width: 100%; 
 
    max-width: 660px; 
 
    background: white; 
 
} 
 
/* Header */ 
 

 
.header { 
 
    text-align: center; 
 
    font-size: 18px; 
 
    padding-top: 30px; 
 
    margin: auto; 
 
} 
 
.header img { 
 
    margin: auto; 
 
    padding-bottom: 15px; 
 
    max-width: 450px; 
 
} 
 
.header .contents { 
 
    font-size: 18px; 
 
    color: #4b3c30; 
 
    font-family: Arial, sans-serif; 
 
} 
 
.header .logo { 
 
    margin: auto; 
 
    text-align: center; 
 
    max-width: 300px; 
 
    display: inline-block; 
 
    padding-bottom: 6px; 
 
} 
 
.header .social { 
 
    max-width: 300px; 
 
    display: inline-block; 
 
} 
 
.header .monthly { 
 
    padding: 0px; 
 
} 
 
.hero { 
 
    padding: 0px; 
 
    margin: 0px; 
 
} 
 
/* Navigation Bar */ 
 

 
.navbar { 
 
    text-align: center; 
 
    font-family: Arial, sans-serif; 
 
    margin: 0; 
 
    padding: 0; 
 
    color: #4b3c30; 
 
    font-size: 15px; 
 
} 
 
.navbar a { 
 
    display: inline-block; 
 
    color: #4b3c30; 
 
    font-size: 15px; 
 
} 
 
/* Body */ 
 

 
.category { 
 
    text-align: left; 
 
    color: #e14c25 !important; 
 
    font-weight: bold; 
 
    font-size: 24px !important; 
 
    padding-left: 5px; 
 
    padding-right: 5px; 
 
    margin: 0px; 
 
} 
 
.title { 
 
    text-align: left; 
 
    font-size: 18px !important; 
 
    color: #e14c25 !important; 
 
    font-weight: bold; 
 
    margin: 0px; 
 
    padding-left: 5px; 
 
    padding-right: 5px; 
 
} 
 
.time { 
 
    text-align: left; 
 
    font-size: 18px !important; 
 
    color: #e14c25 !important; 
 
    margin: 0px; 
 
    padding-left: 5px; 
 
    padding-right: 5px; 
 
} 
 
.price { 
 
    text-align: left; 
 
    font-weight: bold; 
 
    font-size: 12px !important; 
 
    color: #e14c25 !important; 
 
    margin: 0px; 
 
    padding-left: 5px; 
 
    padding-right: 5px; 
 
} 
 
.full-width-image img { 
 
    width: 100%; 
 
    max-width: 660px; 
 
    height: auto; 
 
} 
 
.text { 
 
    font-size: 18px; 
 
    font-family: Arial, sans-serif; 
 
    text-align: left; 
 
    margin: 0px; 
 
    padding-left: 5px; 
 
    padding-right: 5px; 
 
    color: #4b3c30; 
 
} 
 
a { 
 
    color: #e14c25; 
 
    text-decoration: none; 
 
} 
 
.one-column .contents { 
 
    text-align: center; 
 
} 
 
.one-column .navbar { 
 
    font-size: 18px; 
 
    margin: 5px; 
 
    font-family: Arial, sans-serif; 
 
} 
 
.three-column { 
 
    text-align: center; 
 
    font-size: 0; 
 
    padding-top: 10px; 
 
    padding-bottom: 10px; 
 
} 
 
.three-column .column { 
 
    width: 100%; 
 
    max-width: 200px; 
 
    display: inline-block; 
 
    vertical-align: top; 
 
} 
 
.first-two { 
 
    padding-right: 30px !important; 
 
} 
 
.third { 
 
    padding-right: 0px !important; 
 
} 
 
.three-column .contents { 
 
    font-size: 18px; 
 
    font-family: "Arial", sans-serif; 
 
} 
 
.three-column img { 
 
    width: 100%; 
 
    max-width: 200px; 
 
    height: auto; 
 
    margin-top: 0; 
 
    padding-top: 0; 
 
} 
 
/* Caption and Credits */ 
 

 
.caption { 
 
    color: #999999; 
 
    font-family: Arial, sans-serif; 
 
    font-size: 11px !important; 
 
    padding-left: 5px; 
 
    padding-right: 5px; 
 
    padding-bottom: 11px; 
 
} 
 
/* Footer */ 
 

 
#footer { 
 
    background: #cfcac6; 
 
} 
 
#footer .contents { 
 
    color: #4b3c30; 
 
    font-family: Arial, sans-serif; 
 
} 
 
.two-column .column1 { 
 
    width: 100%; 
 
    max-width: 280px; 
 
    display: inline-block; 
 
    vertical-align: top; 
 
    padding-bottom: 10px; 
 
    padding-left: 10px; 
 
    padding-top: 0px; 
 
    padding-right: 20px; 
 
} 
 
.two-column a { 
 
    color: white; 
 
    font-family: Arial, sans-serif !important; 
 
    font-size: 11px; 
 
} 
 
.two-column .column2 { 
 
    width: 100%; 
 
    max-width: 300px; 
 
    display: inline-block; 
 
    vertical-align: top; 
 
    padding-bottom: 10px; 
 
    padding-left: 10px; 
 
    padding-top: 0px; 
 
    padding-right: 20px; 
 
} 
 
.two-column .contents { 
 
    font-size: 11px; 
 
    text-align: left; 
 
} 
 
@media screen and (max-width: 320px) { 
 
    .navbar { 
 
    font-size: 12px; 
 
    } 
 
    .navbar a { 
 
    font-size: 12px; 
 
    } 
 
} 
 
@media screen and (max-width: 480px) { 
 
    .three-column .column { 
 
    max-width: 100% !important; 
 
    } 
 
    .three-column img { 
 
    max-width: 100% !important; 
 
    } 
 
    .header .logo { 
 
    max-width: 45% !important; 
 
    } 
 
    .header .logo .lockup { 
 
    width: 100%; 
 
    height: auto; 
 
    } 
 
    .header .monthly { 
 
    width: 68%; 
 
    height: auto; 
 
    } 
 
    .first-two { 
 
    padding: 0px !important; 
 
    } 
 
} 
 
@media screen and (min-width: 481px) and (max-width: 670px) { 
 
    .three-column .column { 
 
    max-width: 100% !important; 
 
    } 
 
    .three-column img { 
 
    max-width: 100% !important; 
 
    } 
 
    .header .logo { 
 
    max-width: 45% !important; 
 
    } 
 
    .header .logo .lockup { 
 
    width: 100%; 
 
    height: auto; 
 
    } 
 
    .header .monthly { 
 
    width: 68%; 
 
    height: auto; 
 
    } 
 
    .first-two { 
 
    padding: 0px !important; 
 
    } 
 
}

<!-- JUST FOR OUTLOOK--> 
 
<!--[if (gte mso 9)|(IE)]> 
 
     <style type="text/css"> 
 
      table {border-collapse: collapse !important;} 
 
      .one-column a {font-size: 18px !important; color: #e14c25 !important;} 
 
      .three-column a {font-size: 18px !important; color: #e14c25 !important;} 
 
      .three-column img {width:200 height:200} 
 
      .two-column a {color: white !important; font-size: 11px !important; font-family: Arial, sans-serif !important} 
 
      .title img {width: 200px; height: auto;} 
 
     </style> 
 
     <![endif]--> 
 

 

 
<center class="wrapper"> 
 
    <div class="webkit"> 
 
    <p style="text-align: center;" class="social"><a style="color: rgb(225, 76, 37); font-size: 11px;" target="_blank" href="http://links.mkt32.net/ui/modules/display/previewFM.jsp" name="fwd_1_1" xt="SPCLICK">Forward to a friend</a> 
 
     <!--[if (gte mso 9)|(IE)]> 
 
       <table width="660" align="center"> 
 
       <tr> 
 
       <td> 
 
       <![endif]--> 
 
     <table class="outer" align="center"> 
 
     <tr> 
 
      <td> 
 
      <tr> 
 
       <td class="one-column"> 
 
       <table width="100%" cellspacing="0" cellpadding="0" border="0" align="center"> 
 
        <tr> 
 
        <td class="body"> 
 
         <table width="100%"> 
 
         <tr> 
 
          <td class="category"> 
 
          CATEGORY! 
 
          </td> 
 
         </tr> 
 
         <tr> 
 
          <td class="text" width="100%"> 
 
          Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut hendrerit tincidunt finibus. Fusce varius dictum lacus, non mattis magna pulvinar quis. Ut fermentum auctor libero, vitae porta metus fringilla efficitur. 
 
          </td> 
 
         </tr> 
 
         <tr> 
 
          <td class="full-width-image"> 
 
          <img src="images/HERO_PLACEHOLDER.png" width="600" alt="" /> 
 
          </td> 
 
         </tr> 
 
         <tr> 
 
          <td class="time"> 
 
          <strong>Title</strong> Weekday, Month Day 
 
          </td> 
 
         </tr> 
 
         <tr> 
 
          <td class="text"> 
 
          Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut hendrerit tincidunt finibus. Fusce varius dictum lacus, non mattis magna pulvinar quis. Ut fermentum auctor libero, vitae porta metus fringilla efficitur. 
 
          </td> 
 
          <td class="time"> 
 
          <strong>Title</strong> Weekday, Month Day 
 
          </td> 
 
          <td class="text"> 
 
          Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut hendrerit tincidunt finibus. Fusce varius dictum lacus, non mattis magna pulvinar quis. Ut fermentum auctor libero, vitae porta metus fringilla efficitur. 
 
          </td> 
 
          <td class="time"> 
 
          <strong>Title</strong> Weekday, Month Day 
 
          </td> 
 
          <td class="text"> 
 
          Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut hendrerit tincidunt finibus. Fusce varius dictum lacus, non mattis magna pulvinar quis. Ut fermentum auctor libero, vitae porta metus fringilla efficitur. 
 
          </td> 
 
         </tr> 
 
        </td> 
 
        </table> 
 
        </tr> 
 
       </table> 
 
       </td> 
 
      </tr> 
 
      <tr> 
 
      </td> 
 
      </tr> 
 
     </table> 
 
     <!--[if (gte mso 9)|(IE)]> 
 
       </td> 
 
       </tr> 
 
       </table> 
 
       <![endif]--> 
 
    </div> 
 
</center>

источник

2017-01-11 Ned Redmond

Можете ли вы предоставить демо? – sol

Этот пример выглядит намного больше, чем [mcve], которого я ожидал бы от такого вопроса. –

@ovokuro Внизу есть экран Chrome Inspect. Этого достаточно, или вам нужно больше? –

Не уверен, что вы пытаетесь достичь, но проблема заключается в 5 td тегов, которые вы заключите в таблице из которых все остальные tr теги содержат только один тег td :

  <table width="100%" cellspacing="0" cellpadding="0" border="0" align="center"> 
       <tr> 
       <td class="body"> 
        <table width="100%"> 
        <tr> 
         <td class="category" colspan="5"> 
         CATEGORY! 
         </td> 
        </tr> 
        <tr> 
         <td class="text" width="100%"> 
         Lorem ipsum ... 
         </td> 
        </tr> 
        <tr> 
         <td class="full-width-image"> 
         <img src="images/HERO_PLACEHOLDER.png" width="600" alt="" /> 
         </td> 
        </tr> 
        <tr> 
         <td class="time"> 
         <strong>Title</strong> Weekday, Month Day 
         </td> 
        </tr> 
        <tr> 
         <td class="text"> 
         Lorem ipsum ... 
         </td> 
         <td class="time"> 
         <strong>Title</strong> Weekday, Month Day 
         </td> 
         <td class="text"> 
         Lorem ipsum ... 
         </td> 
         <td class="time"> 
         <strong>Title</strong> Weekday, Month Day 
         </td> 
         <td class="text"> 
         Lorem ipsum ... 
         </td> 
        </tr> 
       </td> <!-- also these two lines --> 
       </table> <!-- are in the wrong order --> 
       </tr> 
      </table>

Добавление атрибута colspan может решить эту проблему. Теги td теги, которые находятся в покое tr теги должны иметь colspan="5" как ваш последний tr содержит 5 td s.

Но я думаю, что вы хотите, чтобы один td за tr, так что в этом случае вы могли бы реорганизовать HTML.

Я надеюсь, что это поможет.

источник

2017-01-11 18:56:46 aletzo

Вы правы. Я пытаюсь получить один тд за тр. Я попробую ваши предложения и переоценку. Спасибо! –

Я не уверен, почему это не происходит с моими другими разделами. Заголовок, введение и нижний колонтитулы устанавливаются одинаково с вложенными с в с. Colspan звучит как быстрое исправление, но я хотел бы знать, почему это происходит сейчас, а не в других обстоятельствах. –

@NedRedmond Я не думаю, что я могу видеть ваши другие разделы больше, но я считаю, что другие разделы отображают как ожидалось, потому что они находятся внутри нового тега 'table', поэтому теги 5' td' в таблице категорий 'не влияют на другие таблицы – aletzo

Почему моя колонка максимизируется при ширине 282 пикселей вместо 660 пикселей?

ответ

Смежные вопросы