如何在第一个框的底部显示其他框？
如果您尝试此代码，这两个框将一起显示：
A B
我希望它是这样的：
一个
乙
由于
=== 现在这就是我所做的：但它走向左侧。我希望它保持在右侧。这是完整的代码：
<html>
<head>
<title>*|MC:SUBJECT|*</title>
<meta http-equiv="Content-type" content="text/html; charset=utf-8">
<style type="text/css" media="screen">
p{margin-bottom:10px;}
/**
* @tab Page
* @section background color
* @tip Choose a color for your HTML email's background. You might choose one to match your company's branding.
* @theme page
*/
body {
/*@editable*/ background-color:#FFFFFF;
text-align:center;
}
#layout {
margin:0 auto;
text-align:left;
}
/**
* @tab Header
* @section header top
* @tip Set the look of the archive link bar.
*/
#header-top {
/*@editable*/ background-color:#FFFFFF;
/*@editable*/ border-top:0px none;
/*@editable*/ border-bottom:0px none;
/*@editable*/ color:#505050;
/*@editable*/ font-family:Arial;
/*@editable*/ font-size:11px;
/*@editable*/ font-style:normal;
/*@editable*/ font-weight:normal;
padding:15px 0 5px;
/*@editable*/ text-align:center;
}
/**
* @tab Header
* @section title style
* @tip Titles and headlines in your message body. Make them big and easy to read.
* @theme title
*/
.primary-heading {
/*@editable*/ color:#ACCB4E;
/*@editable*/ font-family:Arial;
/*@editable*/ font-size:48px;
/*@editable*/ font-style:normal;
/*@editable*/ font-weight:normal;
/*@editable*/ line-height:100%;
margin:0;
padding:0px;
/*@editable*/ text-transform:uppercase;
}
/**
* @tab Header
* @section subtitle style
* @tip This is the byline text that appears immediately underneath your titles/headlines.
* @theme subtitle
*/
.secondary-heading {
/*@editable*/ color:#ACCB4E;
/*@editable*/ font-family:Arial;
/*@editable*/ font-size:20px;
/*@editable*/ font-style:normal;
/*@editable*/ font-weight:normal;
/*@editable*/ line-height:100%;
margin:0;
padding:10px 0 0 0;
/*@editable*/ text-transform:uppercase;
}
/**
* @tab Body
* @section content
* @tip This is the default text style for the main content of your email.
* @theme content
*/
#content-left, #content-right {
/*@editable*/ background-color:#FFFFFF;
/*@editable*/ color:#808080;
/*@editable*/ font-family:Arial;
/*@editable*/ font-size:14px;
/*@editable*/ font-style:normal;
/*@editable*/ font-weight:normal;
/*@editable*/ line-height:150%;
padding:15px 0 15px 20px;
vertical-align:top;
width:300px;
}
#content-right{
vertical-align:top;
}
/**
* @tab Body
* @section green box
* @tip This is the default style for the green tip box of your email.
* @theme content
*/
#greenbox{
/*@editable*/ background:#ACCB4E;
/*@editable*/ color:#FFFFFF;
/*@editable*/ font-family:Arial;
/*@editable*/ font-size:16px;
/*@editable*/ font-style:normal;
/*@editable*/ font-weight:normal;
/*@editable*/ line-height:150%;
margin-top:20px;
padding:10px 20px;
/*@editable*/ text-transform:none;
}
/**
* @tab Body
* @section green tip box heading
* @tip This is the default style for the heading of the green tip box.
* @theme content
*/
#greenbox .secondary-heading {
/*@editable*/ color:#FFFFFF;
/*@editable*/ font-family:Arial;
/*@editable*/ font-size:20px;
/*@editable*/ font-style:normal;
/*@editable*/ font-weight:normal;
}
/**
* @tab Body
* @section sidebar widget headings
* @tip This is the default style for the sidebar widgets of your email.
* @theme content
*/
.widget .secondary-heading {
/*@editable*/ color:#ACCB4E;
/*@editable*/ font-family:Arial;
/*@editable*/ font-size:18px;
/*@editable*/ font-style:normal;
/*@editable*/ font-weight:normal;
/*@editable*/ line-height:100%;
/*@editable*/ text-transform:none;
}
/**
* @tab Body
* @section sidebar widget text
* @tip This is the default style for the sidebar widgets of your email.
* @theme content
*/
.widget {
/*@editable*/ color:#808080;
/*@editable*/ font-family:Arial;
/*@editable*/ font-size:12px;
/*@editable*/ font-style:normal;
/*@editable*/ font-weight:normal;
/*@editable*/ line-height:150%;
margin-top:20px;
margin-bottom:15px;
width:260px;
}
/**
* @tab Footer
* @section footer
* @tip You might give your footer a light background color and separate it with a top border
* @theme footer
*/
#footer {
/*@editable*/ background-color:#FFFFFF;
/*@editable*/ border-top:0px none;
/*@editable*/ border-bottom:0px none;
/*@editable*/ color:#909090;
/*@editable*/ font-family:Arial;
/*@editable*/ font-size:11px;
/*@editable*/ font-style:normal;
/*@editable*/ font-weight:normal;
/*@editable*/ line-height:14px;
padding:20px 0 20px 0;
/*@editable*/ text-align:center;
}
/**
* @tab Footer
* @section link style
* @tip Specify a color for your footer hyperlinks.
* @theme link_footer
*/
#footer a {
/*@editable*/ color:#5D7428;
/*@editable*/ font-weight:normal;
/*@editable*/ text-decoration:underline;
}
/**
* @tab Page
* @section link style
* @tip Specify a color for all the hyperlinks in your email.
* @theme link
*/
a, a:link, a:visited {
/*@editable*/ color:#5D7428;
/*@editable*/ font-weight:normal;
/*@editable*/ text-decoration:underline;
}
</style>
</head>
<body>
<table width="600" border="0" cellspacing="0" cellpadding="0" id="layout">
<tr>
<td id="header-top" colspan="2" mc:edit="header-top">
<p>Email not displaying correctly? <a href="*|ARCHIVE|*" title="View this email in your browser.">View it in your browser</a></p>
</td>
</tr>
<tr>
<td id="content-left" colspan="1">
<div mc:edit="main">
<!--<img src="http://gallery.mailchimp.com/0d61bb2ec9002f0e9872b8c36/images/environment_newsletter_header.png">-->
<img alt="" border="0" height="234px" src="http://gallery.mailchimp.com/86b4d752e397a2dbd09e3dd60/images/big_image_edited.2.jpg" width="400px" />
<h1 class="primary-heading">Live Green</h1>
<p>Sample copy. Lorem ipsum dolor sit amet, consectetuer orem adipiscing elit. Est em morbi commodo, ipsum sed pharetra est gravida. Suspendisse id velit vitae et ligula volutpat ipsum condimentum. </p>
<p>Sample copy. Lorem ipsum dolor sit amet, consectetuer orem adipiscing elit. Est em morbi commodo.</p>
</div>
<div id="greenbox" mc:edit="greenbox">
<h2 class="secondary-heading">Green Living Tip</h2>
<p>Sample copy. Lorem ipsum dolor sit amet, consectetuer orem adipiscing elit. Est em morbi commodo, ipsum sed pharetra est gravida, orci magna fugit rhoncus neque, id pulvinar odio lorem non turpis. </p>
</div>
</td>
<tr> <div id="content-right" colspan="1">
<div class="widget" mc:repeatable>
<div mc:edit="content-right-repeatable">
<h2 class="secondary-heading">Green Living Tip</h2>
<p>Sample copy. Lorem ipsum dolor sit amet, consectetuer orem adipiscing elit. Est em morbi commodo, ipsum sed pharetra est gravida, orci magna fugit rhoncus neque, id pulvinar odio lorem non turpis.</p>
<p><a href="#">Read More</a></p>
</div>
</div>
</div>
</tr>
<tr>
<div id="content-right" colspan="1">
<div class="widget" mc:repeatable>
<div mc:edit="content-right-repeatable">
<h2 class="secondary-heading">Green Living Tip</h2>
<p>Sample copy. Lorem ipsum dolor sit amet, consectetuer orem adipiscing elit. Est em morbi commodo, ipsum sed pharetra est gravida, orci magna fugit rhoncus neque, id pulvinar odio lorem non turpis.</p>
<p><a href="#">Read More</a></p>
</div>
</div>
</div>
</tr>
</tr>
<tr>
<td id="footer" colspan="2" mc:edit="footer">
<p><a href="*|UNSUB|*">Unsubscribe</a> | <a href="*|UPDATE_PROFILE|*">Update your profile</a> | <a href="*|FORWARD|*">Forward to a friend</a></p>
<p>Copyright (C) *|CURRENT_YEAR|* *|LIST:COMPANY|* All rights reserved.<br />*|LIST:DESCRIPTION|*<br />*|HTML:LIST_ADDRESS_HTML|*</p>
</td>
</tr>
</table>
<span style="padding: 0px;"></span>
</body>
答案 0 :(得分：2)
您可以使用<div>来构建您的盒子，而不是使用表格。默认情况下，<div>元素会一个接一个地对齐...但您可以使用CSS来设置它们的样式并根据需要定位它们。
查看以下链接，了解我对您的设计所做的工作。
http://hristo.oskov.com/wp-content/uploads/2010/08/test.html
如果您对我做了什么或如何做到有疑问，请告诉我，我将很乐意详细解释。
希望这有帮助！
答案 1 :(得分：2)
如果您只是使用该表来布置单个元素，您可以（并且应该）使用CSS。只需将'td'变为div，它们就会自动排列在另一个之下。然后，如果您想稍后更改定位，则只需更新CSS而不是重新排列表结构。
在将基于表格的布局更改为基于CSS的布局时，我在http://www.htmldog.com/guides/找到了一系列精彩的实用教程。
答案 2 :(得分：0)
您可以通过将TD更改为TR来解决此问题。 （这会将它从两列更改为两行）