只是警告您，我几乎没有任何编码经验。无论如何，我下载了此模板来创建新闻稿，但是如果我在一个部分中添加了太多文本，它将把下一个部分推到一个怪异的空间。我可以通过反转其下方两个单元的左/右对齐来解决它，但是我希望将单元向下推，而不是向左或向右推。
包含图像以显示错误。 Columns all wonky 我该如何解决？
.header,
.title,
.subtitle,
.footer-text {
font-family: Helvetica, Arial, sans-serif;
}
.header {
font-size: 24px;
font-weight: bold;
padding-bottom: 12px;
color: #505050;
}
.footer-text {
font-size: 12px;
line-height: 16px;
color: #aaaaaa;
}
.footer-text a {
color: #aaaaaa;
}
.container {
width: 600px;
max-width: 600px;
}
.container-padding {
padding-left: 24px;
padding-right: 24px;
}
.content {
padding-top: 12px;
padding-bottom: 12px;
background-color: #ffffff;
}
code {
background-color: #eee;
padding: 0 4px;
font-family: Menlo, Courier, monospace;
font-size: 12px;
}
hr {
border: 0;
border-bottom: 1px solid #cccccc;
}
a {
font-weight: 600;
color: #a6192e;
}
.hr {
height: 1px;
border-bottom: 1px solid #cccccc;
}
.title {
font-size: 18px;
font-weight: 600;
color: #404040;
}
.subtitle {
font-size: 16px;
font-weight: 600;
color: #a6192e;
}
.subtitle span {
font-weight: 400;
color: #999999;
}
.body-text {
font-family: Helvetica, Arial, sans-serif;
font-size: 12px;
line-height: 20px;
text-align: left;
color: #404040;
}
.col {
font-family: Helvetica, Arial, sans-serif;
font-size: 12px;
line-height: 20px;
text-align: left;
color: #333333;
width: 100%;
}
a[href^="x-apple-data-detectors:"],
a[x-apple-data-detectors] {
color: inherit !important;
text-decoration: none !important;
font-size: inherit !important;
font-family: inherit !important;
font-weight: inherit !important;
line-height: inherit !important;
}<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html xmlns="http://www.w3.org/1999/xhtml"
xmlns:v="urn:schemas-microsoft-com:vml"
xmlns:o="urn:schemas-microsoft-com:office:office">
<head>
<!--[if gte mso 9]><xml>
<o:OfficeDocumentSettings>
<o:AllowPNG/>
<o:PixelsPerInch>96</o:PixelsPerInch>
</o:OfficeDocumentSettings>
</xml><![endif]-->
<!-- fix outlook zooming on 120 DPI windows devices -->
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1"> <!-- So that mobile will display zoomed in -->
<meta http-equiv="X-UA-Compatible" content="IE=edge"> <!-- enable media queries for windows phone 8 -->
<meta name="format-detection" content="date=no"> <!-- disable auto date linking in iOS 7-9 -->
<meta name="format-detection" content="telephone=no"> <!-- disable auto telephone linking in iOS 7-9 -->
<title>Two Columns to Rows (Simple)</title>
<link rel="stylesheet" type="text/css" href="styles.css">
<link rel="stylesheet" type="text/css" href="responsive.css">
<style type="text/css">a {text-decoration: none}</style>
</head>
<body style="margin:0; padding:0;" bgcolor="#F0F0F0" leftmargin="0" topmargin="0" marginwidth="0" marginheight="0">
<!-- 100% background wrapper (grey background) -->
<table border="0" width="100%" height="100%" cellpadding="0" cellspacing="0" bgcolor="#F0F0F0">
<tr>
<td align="center" valign="top" bgcolor="#F0F0F0" style="background-color: #F0F0F0;">
<br>
<!-- 600px container (white background) -->
<table border="0" width="600" cellpadding="0" cellspacing="0" class="container">
<tr>
<td class="container-padding header" align="left">
Student Update August 29
</td>
</tr>
<tr>
<td class="container-padding content" align="left">
<br>
<div class="title">Academic Advising</div>
<br>
<div class="body-text">
Academic advising for the Faculty of Environment <a href="http://www.sfu.ca/fenv/students/current-students/undergraduate-students/advising.html" style="text-decoration: none">HERE</a>
<br><br>
</div>
<div class="hr"> </div>
<br>
<!-- example: two columns (simple) -->
<!--[if mso]>
<table border="0" cellpadding="0" cellspacing="0" width="100%">
<tr><td width="50%" valign="top"><![endif]-->
<table width="264" border="0" cellpadding="0" cellspacing="0" align="left" class="force-row">
<tr>
<td class="col" valign="top">
<div class="subtitle">
<strong>Herman Melville</strong>
</div>
<br>
It's worse than being in the whirled woods, the last day of the year! Who'd go climbing after chestnuts now? But there they go, all cursing, and here I don't. It's worse than being in the whirled woods, the last day of the year! Who'd go climbing after chestnuts now? But there they go, all cursing, and here I don't.
It's worse than being in the whirled woods, the last day of the year! Who'd go climbing after chestnuts now? But there they go, all cursing, and here I don't.
<br><br>
</td>
</tr>
</table>
<!--[if mso]></td><td width="50%" valign="top"><![endif]-->
<table width="264" border="0" cellpadding="0" cellspacing="0" align="right" class="force-row">
<tr>
<td class="col" valign="top">
<div class="subtitle">
<strong>I am Ishmael</strong>
</div>
<br>
White squalls? white whale, shirr! shirr! Here have I heard all their chat just now, and the white whale—shirr! shirr!—but spoken of once! and… White squalls? white whale, shirr! shirr! Here have I heard all their chat just now, and the white whale—shirr! shirr!—but spoken of once! and…
<br><br>
</td>
</tr>
</table>
<!--[if mso]></td><td width="50%" valign="top"><![endif]-->
<table width="264" border="0" cellpadding="0" cellspacing="0" align="left" class="force-row">
<tr>
<td class="col" valign="top">
<div class="subtitle">
<strong>I am Ishmael</strong>
</div>
<br>
White squalls? white whale, shirr! shirr! Here have I heard all their chat just now, and the white whale—shirr! shirr!—but spoken of once! and…
<br><br>
</td>
</tr>
</table>
<!--[if mso]></td><td width="50%" valign="top"><![endif]-->
<table width="264" border="0" cellpadding="0" cellspacing="0" align="right" class="force-row">
<tr>
<td class="col" valign="top">
<div class="subtitle">
<strong>I am Ishmael</strong>
</div>
<br>
sdsaddasdadas
<br><br>
</td>
</tr>
</table>
<!--[if mso]></td><td width="50%" valign="top"><![endif]-->
<table width="264" border="0" cellpadding="0" cellspacing="0" align="left" class="force-row">
<tr>
<td class="col" valign="top">
<div class="subtitle">
<strong>I am Ishmael</strong>
</div>
<br>
White squalls? white whale, shirr! shirr! Here have I heard all their chat just now, and the white whale—shirr! shirr!—but spoken of once! and…
<br><br>
</td>
</tr>
</table>
<!--[if mso]></td><td width="50%" valign="top"><![endif]-->
<table width="264" border="0" cellpadding="0" cellspacing="0" align="right" class="force-row">
<tr>
<td class="col" valign="top">
<div class="subtitle">
<strong>I am Ishmael</strong>
</div>
<br>
White squalls? white whale, shirr! shirr! Here have I heard all their chat just now, and the white whale—shirr! shirr!—but spoken of once! and…
<br><br>
</td>
</tr>
</table>
<!--[if mso]></td></tr></table><![endif]-->
<!--/ end example -->
<div class="hr" style="clear: both;"> </div>
<br>
<div class="subtitle">
Code Walkthrough
</div>
<div class="body-text">
<ol>
<li>
Create a columns container <code><table></code> just for Outlook using <code>if mso</code> conditionals.<br>
The container's <code><td></code>'s have a width of <code>50%.</code>
<br><br>
</li>
<li>
Wrap our columns in a <code><table></code> with a <strong>fixed width</strong> of <code>264px</code>.
<ul>
<li>
264px = (600 - 24*3) / 2 - container width minus margins divided by number of columns
</li>
<li>
First table is aligned left.
</li>
<li>
Second table is aligned right.
</li>
</ul>
<br>
</li>
<li>
Apply <code>clear: both;</code> to first element after our wrapper table.
</li>
</ol>
</div>
<br>
</td>
</tr>
<tr>
<td class="container-padding footer-text" align="left">
<br>
<br>
<span class="ios-footer">
Faculty of Environment<br>
TASC2 Suite 8800<br>
Burnaby V5A 1S6<br>
</span>
<a href="http://www.sfu.ca/fenv">www.sfu.ca/fenv</a><br>
<br><br>
</td>
</tr>
</table><!--/600px container -->
</td>
</tr>
</table><!--/100% background wrapper-->
</body>
</html>