我正在尝试为Outlook创建响应式时事通讯。 但是一盒不想工作。我发现从https://www.campaignmonitor.com/css/开始，Outlook 2013中的浮动和显示不起作用。 在框的左侧，它有一张图片（275x200），在右侧有一个标题，文字和一个按钮。该框有4xtd，宽度为20px作为边框。
我也会粘贴我的代码，所以你可以看看它。
这是我的代码：
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 5.0 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="content-type" content="text/html; charset=UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no" >
<style type="text/css">
img {
border:0;
}
a {
text-decoration: none;
color: #565656;
}
div, p, a, li, td {
-webkit-text-size-adjust:none;
}
.span_buttonlink{
display:block;
width:100%;
white-space: nowrap;
overflow:hidden !important;
text-overflow: ellipsis;
}
table.second_table table {
font-family: Verdana,Arial;
font-size: 12px;
color: #999999;
}
#floatleft{
float:left;
width:275px;
}
#floatright{
float:right;
width: 268px;
padding-left: 3%;
}
@media screen and (max-device-width: 720px) {
body{
width: 90%;
margin: 0 auto;
}
img{
width: 100%;
padding: 2% 0 2% 0;
}
.first_table{
width: 100%;
}
.second_table{
width: 100%;
}
.second_table td{
display: block;
width: 90%;
padding: 0 5% 0 5%;
}
table.textbutton_rechts td {
width: 100% !important;
}
table.second_table td table td {
padding: 0;
float: left;
width: 50%;
}
#mobile{
display: block;
}
#floatleft{
float:none !important;
width: 100% !important;
}
#floatright{
float:none !important;
width:100% !important;
padding-left: 0;
}
}
</style>
<title>Responsive Newsletter-Template</title>
</head>
<body bgcolor="#e9eaed" style="background-color: #e9eaed;">
<center>
<table class="first_table" width="600" bgcolor="#ffffff" cellpadding="0" cellspacing="0" border="0">
<!--Start:Detailbereich-->
<!--Start:1. Layout-->
<tr>
<!-- Spacer -->
<td width="20"></td>
<td width="560">
<table class="second_table" width="560" cellpadding="0" cellspacing="0" border="0" bgcolor="#FFFFFF">
<tr>
<!-- Weisser Spacer -->
<td width="560" height="20" colspan="3"></td>
</tr>
<tr>
<td style="font-family:Verdana,Arial;font-size:12px;color:#999999;" valign="top" width="560" align="left">
<!-- Hier wird das Bild des 1. Layout im Detailbereich definiert und verlinkt -->
<div id="floatleft">
<a href="http://www.newcomsolution.ch/" target="_blank">
<img src="http://www.newcommunications.ch/projects/IPA_AKI_2015/Detailbereich_Layoutbild.jpg" alt="Layoutbild" />
</a>
</div>
<div id="floatright">
<div style="font-family:Verdana,Arial;font-size:12px;color:#999999;margin-bottom:5px;font-weight:bold;">
Titel Layout 1
</div>
<span>
Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua.
At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.
</span>
<br />
<br />
<!-- Start: Weiterführender Link 1 des Detailbereichs (Link von 1. Layout) -->
<table class="textbutton_rechts" id="mobile" align="left" border="0" cellpadding="0" cellspacing="0">
<tbody>
<tr>
<td style="padding: 8px;font-size: 10px; line-height: 1.0; font-family: verdana; color:#ffffff;" align="center" valign="middle" bgcolor="#25A5DE">
<span class="span_buttonlink">
<!-- Die Verlinkung und der Text im Button -->
<a href="http://www.newcomsolution.ch/" style="font-weight:normal;font-style:normal;color:#ffffff;text-decoration:none;">
Link-Button
</a>
</span>
</td>
</tr>
</tbody>
</table>
<!-- Ende: Weiterführender Link 1 des Detailbereichs (Link von 1. Layout) -->
</div>
</td>
</tr>
<tr>
<!-- Weisser Spacer -->
<td width="560" colspan="3" height="20"></td>
</tr>
</table>
</td>
<!-- Spacer -->
<td width="20"></td>
</tr>
<tr>
<!-- Start: Spacer zwischen den Bereichen -->
<td width="20" style="background-color:#e9eaed;"></td>
<td width="560" style="background-color:#e9eaed;"> </td>
<td width="20" style="background-color:#e9eaed;"></td>
<!-- Ende: Spacer zwischen den Bereichen -->
</tr>
<!--Ende:1. Layout-->
</table>
</center>
</body>
</html>