0
我需要這個列是全角，這是660px。爲什麼我的列在282px寬度而不是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>
你能提供演示嗎？ – sol
這個例子看起來比我期待這個問題的[mcve]大得多。 –
@ovokuro底部有一個Chrome Inspect屏幕的鏈接。這是否足夠，還是你需要更多？ –