为什么我的列最大宽度为282px而不是660px？

时间：2017-01-11 18:28:34

标签： html css html-table

我需要此列为全宽，即660px。

其他部分正常运行，但我从下面的代码中删除它们以使代码块“最小化”。我无法确定功能部分和这个不起作用的部分之间的区别。我需要先解决这个问题（以最基本/最基本的方式来解决电子邮件客户端问题），我需要了解这一点。

  • 没有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>

1 个答案:

答案 0 :(得分：0)

不确定您要尝试实现的目标，但问题出在5个td标记中，这些标记包含在一个表中，其中所有其他tr标记只包含一个td标记1}}标签：

            <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。

但我认为你想要的是每td只有一个tr，所以在这种情况下你可以重构HTML。

我希望有所帮助。

相关问题
最新问题