个人中心
gpt4 book ai didi

html - 为什么我的列最大宽度为 282 像素而不是 660 像素？

转载 作者：行者123 更新时间：2023-11-28 04:33:56 24 4
gpt4 key购买 nike

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

其他部分功能正常，但我从下面的代码中删除了它们以使代码块“最小化”。我无法确定功能部分和这个非功能部分之间的区别。我需要先解决这个问题(以最基本/最基本的方式来实现电子邮件客户端兼容性)，然后我需要了解这一点。

  • 没有指示特定宽度或百分比的 CSS。
  • 没有指示此宽度的父元素。
  • 在我看来完全相同的其他部分是适当的全宽。

  • 在 Chrome 上检查显示 282 宽度，但没有说明原因。 (screenshot)

  • 即使我将 HTML 的宽度设置为 100% 或 660，浏览器也会忽略它并将其保持在 282。

  • 如果单个完整的文本字符串超出 282，则整个模板会水平拉伸(stretch)以保持列的比例。

下面是整个未完成的模板。有很多额外的 CSS，我稍后会通过 Inspect 审计剔除这些 CSS，但没有迹象表明任何样式会触及这些 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>

最佳答案

不确定您要实现的目标，但问题在于您在表格中包含的 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 属性可以解决这个问题。 tr 标签中单独的 td 标签应该有 colspan="5" 因为你最后一个 tr 包含 5 tds.

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

希望对您有所帮助。

关于html - 为什么我的列最大宽度为 282 像素而不是 660 像素？，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/41598121/

24 4 0
文章推荐： html - 调整大小后如何使菜单可点击？
文章推荐： c++ - 在内循环中使用 OpenMP 时性能不佳
文章推荐： javascript - 从链接中删除点击事件并恢复默认行为
文章推荐： css - 如何溢出:scroll on sticky div
行者123
个人简介

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

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