Html 不并排放置表格的流体双列表格布局
请原谅我的新手编码,因为它是数百个电子邮件布局的弗兰肯斯坦组合,但是有人能告诉我为什么我的表格布局没有并排显示列表格吗 这是两个td元素,类名容器的宽度为50%,不能并排放置。我没有使用float或div 是不是因为它们是单独的表,而它们应该是同一td的一部分?请随意提出其他修改/建议,以便我可以改进我的布局。左列必须精确为283px,但右列可以是100%流体。这是唯一的要求Html 不并排放置表格的流体双列表格布局,html,css,email,html-table,fluid-layout,Html,Css,Email,Html Table,Fluid Layout,请原谅我的新手编码,因为它是数百个电子邮件布局的弗兰肯斯坦组合,但是有人能告诉我为什么我的表格布局没有并排显示列表格吗 这是两个td元素,类名容器的宽度为50%,不能并排放置。我没有使用float或div 是不是因为它们是单独的表,而它们应该是同一td的一部分?请随意提出其他修改/建议,以便我可以改进我的布局。左列必须精确为283px,但右列可以是100%流体。这是唯一的要求 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
<!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>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta name="viewport" content="width=device-width"/>
<style type="text/css">
@media only screen and (min-device-width: 541px), screen and (min-width: 541px) {
#body {
width: 600px !important;
}
}
@media only screen and (max-width: 480px) {
#body {
width: 100% !important;
}
.container {
display: block !important;
width: 100% !important;
}
.container-small {
display: block !important;
width: 100% !important;
}
.header-image {
height: auto !important;
max-width: 480px !important;
width: 100% !important;
}
.column-image {
height:auto !important;
max-width: 283px !important;
width: 100% !important;
}
.content {
color: #000000;
font-family: Arial, Helvetica, sans-serif;
font-size: 100% !important;
font-weight: normal;
line-height: 125% !important;
}
}
.container {
display: block!important;
max-width: 600px!important;
margin: 0 auto!important;
clear: both!important;
}
.container-small {
display: block !important;
width: 100% !important;
}
.header-image {
height: auto !important;
max-width: 600px !important;
width: 100% !important;
}
.column-image {
height: auto !important;
max-width: 283px !important;
width: 100% !important;
}
.content {
max-width: 600px;
margin: 0 auto;
display: block;
}
.content table {
width: 100%;
}
* {
padding: 0;
margin: 0;
font-family: Arial, Helvetica, sans-serif;
font-size: 100%;
line-height: 125%;
}
img {
-ms-interpolation-mode: bicubic;
}
a {
color: #EC6129;
font-family: Arial, Helvetica, sans-serif;
font-size: 100%;
font-weight: bold;
line-height: 125%;
text-decoration: none;
}
.ExternalClass {
width: 100%;
}
.ExternalClass,
.ExternalClass p,
.ExternalClass span,
.ExternalClass font,
.ExternalClass td,
.ExternalClass div {
line-height: 100%;
}
.msoFix {
mso-table-lspace:-1pt;
mso-table-rspace:-1pt;
}
.service-text {
text-align: center;
}
.service-text p {
text-align: left
}
.last {
margin-bottom: 0px;
}
.first {
margin-top: 0px;
}
body, .body {
-webkit-font-smoothing: antialiased;
-webkit-text-size-adjust: 100%;
-ms-text-size-adjust: 100%;
width: 100% !important;
height: 100%;
display: block;
max-width: 600px;
margin: 0 auto;
margin-top: 20px;
background-color: #999999;
color: #000000;
font-family: Arial, Helvetica, sans-serif;
font-weight: normal;
font-size: 100%;
line-height: 125%;
}
h1, h2, h3 {
color: #000000;
font-family: Arial, Helvetica, sans-serif;
font-weight: bold;
font-size: 100%;
line-height: 125%;
margin-top: 10px;
margin-left: 10px;
margin-right: 10px;
margin-bottom: 10px;
}
h1 {
font-size: 1.8em;
margin-top: 10px;
margin-left: 10px;
margin-right: 10px;
margin-bottom: 10px;
}
h2 {
font-size: 1.5em;
margin-top: 10px;
margin-left: 10px;
margin-right: 10px;
margin-bottom: 10px;
}
h3 {
font-size: 1.2em;
margin-top: 10px;
margin-left: 10px;
margin-right: 10px;
margin-bottom: 10px;
}
p, ul, ol {
font-size: 1.0em;
margin-top: 10px;
margin-left: 10px;
margin-right: 10px;
margin-bottom: 10px;
}
ul li, ol li {
list-style-position: inside;
margin-top: 10px;
margin-left: 10px;
margin-right: 10px;
margin-bottom: 10px;
}
sup, sub {
vertical-align: baseline;
position: relative;
top: -0.2em;
}
sub {
top: 0.2em;
}
.large-button {
color: #FFFFFF;
background-color: #666666;
border: none;
border-bottom: 1px solid #666666;
line-height: 125%;
display: inline-block;
width: 100%;
margin: 0 auto;
position: relative;
font-style: normal;
font-weight: bold;
font-family: Arial, Helvetica, sans-serif;
font-size: 100%;
outline: none;
text-decoration: none;
text-align: center;
cursor: pointer;
-webkit-border-radius: 2em;
-moz-border-radius: 2em;
border-radius: 2em;
}
</style>
</head>
<body align="center" bgcolor="#666666" style="background-color: #666666; width: 100%; max-width: 600px;">
<!--[if (gte mso 9)|(IE)]>
<table width="600" align="center" cellpadding="0" cellspacing="0" border="0">
<tr>
<td>
<![endif]-->
<table id="body" align="center" bgcolor="FFFFFF" border="0" cellpadding="0" cellspacing="0" width="600" style="background-color: #FFFFFF; width: 100%; max-width: 600px; border: 0px solid #999999; border-right: 0px solid #999999;border-left: 0px solid #999999; border-top: 0px solid #999999; border-bottom: 0px solid #999999;">
<tr>
<td class="container" align="center" valign="top" width="100%">
<table border="0" cellpadding="0" cellspacing="0" width="100%" style="background-color: #FFFFFF; width: 100%; max-width: 600px;">
<tr>
<td class="content" align="center" valign="top" width="100%">
<center><img src="https://www.vpcode.com/vfeimages/uploads/email/PureStorage_Email_Banner.png" alt="Pure Storage" style="height: auto !important; width: 100% !important;" class="header-image"/></center>
</td>
</tr>
</table>
<table border="0" cellpadding="0" cellspacing="10" width="600" style="background-color: #FFFFFF; width: 100%; max-width: 600px;">
<tr>
<td class="container-small" align="center" valign="top" width="50%">
<table border="0" cellpadding="0" cellspacing="0" width="100%">
<tr>
<td class="content" align="left" valign="top">
<img src="https://www.vpcode.com/vfeimages/uploads/email/Vivint_Virtual_Card.png" alt="Vivint Card" align="left" width="283" style="max-width: 283px;" class="column-image" />
</td>
</tr>
<tr>
<td class="content" align="left" valign="top">
<p>Lorem ipsum dolor sit amet.</p>
</td>
</tr>
</table>
</td>
<td class="container-small" align="center" valign="top" width="50%">
<table border="0" cellpadding="0" cellspacing="0" width="100%">
<tr>
<td class="content" align="left" valign="top">
<p>Dear #FirstName#,</p>
<p>Congratulations! $#DollarAmount# in reward money is available to load onto your Visa Prepaid Card! To accept your funding, simply click on the button below. Be sure to have your card handy.</p>
<p><b>Reference Code:</b> #Promocode#</p>
<p>#EmailMessage#</p>
</td>
</tr>
</table>
</td>
</tr>
</table>
<table border="0" cellpadding="0" cellspacing="10" width="100%" style="background-color: #FFFFFF; width: 100%; max-width: 600px;">
<tr>
<td align="center" valign="top" width="100%">
<table border="0" cellpadding="0" cellspacing="0" style="background-color: #FFFFFF; max-width: 600px; border-collapse: separate; border-radius: 2em;">
<tr>
<td class="large-button" align="center" valign="middle" width="100%" style="color: #FFFFFF; font-family: Arial; font-size: 100%; font-weight: bold; line-height: 125%; padding: 10px; text-align: center;">
<center><a href="#vpcodeurl#" title="Click Here" target="_blank" style="color: #FFFFFF; display: block; text-decoration: none; width: 100%;">Click Here to Access Your Reward</a></center>
</td>
</tr>
</table>
</td>
</tr>
<tr>
<td class="content" align="left" valign="top" width="100%">
<p>If you do not yet have a card, please hold onto this email. You will receive your card shortly and can accept your reward at that time.</p>
<p>If you need help, email <a href="mailto:service@prepaidcodecenter.com" title="Email Prepaid Code Center" target="_blank">service@prepaidcodecenter.com</a> or call Cardholder Services at 1-877-325-8444 during standard business hours.</p>
</td>
</tr>
<tr>
<td class="content" align="center" valign="top" width="100%">
<center><p>Program issued by The Bancorp Bank, Member FDIC, pursuant to a license from Visa U.S.A. Inc.</p></center>
</td>
</tr>
</table>
</td>
</tr>
</table>
<!--[if (gte mso 9)|(IE)]>
</td>
</tr>
</table>
<![endif]-->
</body>
</html>
问题在于:
.container-small {
display: block !important;
width: 100% !important;
}
只需删除上面的这两个属性
下面的片段:
@仅媒体屏幕和最小设备宽度:541px,屏幕和最小设备宽度:541px{
身体{
宽度:600px!重要;
}
}
@仅介质屏幕,最大宽度:480px{
身体{
宽度:100%!重要;
}
.集装箱{
显示:块!重要;
宽度:100%!重要;
}
.小型货柜{
显示:块!重要;
宽度:100%!重要;
}
.标题图像{
高度:自动!重要;
最大宽度:480px!重要;
宽度:100%!重要;
}
.列图像{
高度:自动!重要;
最大宽度:283px!重要;
宽度:100%!重要;
}
.内容{
颜色:000000;
字体系列:Arial、Helvetica、无衬线字体;
字体大小:100%!重要;
字体大小:正常;
线高:125%!重要;
}
}
.集装箱{
显示:块!重要;
最大宽度:600px!重要;
保证金:0自动!重要;
清楚:两者都有!很重要;
}
/*移到这里
.小型货柜{
显示:块!重要;
宽度:100%!重要;
}
*/
.标题图像{
高度:自动!重要;
最大宽度:600px!重要;
宽度:100%!重要;
}
.列图像{
高度:自动!重要;
最大宽度:283px!重要;
宽度:100%!重要;
}
.内容{
最大宽度:600px;
保证金:0自动;
显示:块;
}
.内容表{
宽度:100%;
}
* {
填充:0;
保证金:0;
字体系列:Arial、Helvetica、无衬线字体;
字体大小:100%;
线高:125%;
}
img{
-ms插值方式:双三次插值;
}
a{
颜色:EC6129;
字体系列:Arial、Helvetica、无衬线字体;
字体大小:100%;
字体大小:粗体;
线高:125%;
文字装饰:无;
}
.外部类{
宽度:100%;
}
.外部类,
.外部类别p,
.ExternalClass span,
.ExternalClass字体,
.ExternalClass td,
.ExternalClass分区{
线高:100%;
}
姆索菲克斯先生{
mso表空间:-1pt;
mso表rspace:-1pt;
}
.服务文本{
文本对齐:居中;
}
.服务文本{
文本对齐:左对齐
}
.最后{
边缘底部:0px;
}
.首先{
边际上限:0px;
}
身体,身体{
-webkit字体平滑:抗锯齿;
-webkit文本大小调整:100%;
-ms文本大小调整:100%;
宽度:100%!重要;
身高:100%;
显示:块;
最大宽度:600px;
保证金:0自动;
边缘顶部:20px;
背景颜色:999999;
颜色:000000;
字体系列:Arial、Helvetica、无衬线字体;
字体大小:正常;
字体大小:100%;
线高:125%;
}
h1,h2,h3{
颜色:000000;
字体系列:Arial、Helvetica、无衬线字体;
字体大小:粗体;
字体大小:100%;
线高:125%;
边缘顶部:10px;
左边距:10px;
右边距:10px;
边缘底部:10px;
}
h1{
字号:1.8em;
边缘顶部:10px;
左边距:10px;
右边距:10px;
边缘底部:10px;
}
氢{
字号:1.5em;
边缘顶部:10px;
左边距:10px;
右边距:10px
;
边缘底部:10px;
}
h3{
字体大小:1.2米;
边缘顶部:10px;
左边距:10px;
右边距:10px;
边缘底部:10px;
}
p、 ul,ol{
字号:1.0em;
边缘顶部:10px;
左边距:10px;
右边距:10px;
边缘底部:10px;
}
ul li,ol li{
列表样式位置:内部;
边缘顶部:10px;
左边距:10px;
右边距:10px;
边缘底部:10px;
}
副手{
垂直对齐:基线;
位置:相对位置;
顶部:-0.2米;
}
潜艇{
顶部:0.2米;
}
.大按钮{
颜色:FFFFFF;
背景色:666666;
边界:无;
边框底部:1px实心6666;
线高:125%;
显示:内联块;
宽度:100%;
保证金:0自动;
位置:相对位置;
字体风格:普通;
字体大小:粗体;
字体系列:Arial、Helvetica、无衬线字体;
字体大小:100%;
大纲:无;
文字装饰:无;
文本对齐:居中;
光标:指针;
-webkit边界半径:2米;
-莫兹边界半径:2米;
边界半径:2米;
}
Lorem ipsum dolor sit amet
亲爱的名字
恭喜你$可将多拉金额的奖励金加载到您的Visa预付卡上!要接受您的资助,只需单击下面的按钮。一定要把你的名片放在手边
参考代码:Promocode
电子邮件
如果您还没有信用卡,请保留此电子邮件。您将很快收到您的卡,届时您可以接受奖励
如果您需要帮助,请在标准工作时间内发送电子邮件或致电1-877-325-8444向持卡人服务部咨询
由联邦存款保险公司成员银行Bancorp Bank根据Visa U.S.a.Inc.的许可证发布的计划
哇,这是一个简单的修复。非常感谢你!当我尝试返回并添加不属于的全局标记时,就会发生这种情况: