2
如何在第一個底部顯示此其他框顯示？使用html的css樣式
如果你試試這個代碼，這2盒將一起顯示：
AB
而且我想它是這樣的：
一個
乙
感謝
=== 現在這就是我所做的：但是它走到了左邊。我希望它留在右側。這裏是整個代碼：
<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>
更正您的帖子以正確顯示您的意思，您可以通過在當前行的末尾留出兩個空格來新行。有關更多信息，請單擊粉紅色問號圖標。 – 2010-08-09 16:38:10
這應該在堆棧溢出...請不要在那裏交叉，它會自動遷移。 – Hello71 2010-08-09 16:38:32
我非常感謝 – tintincutes 2010-08-09 17:03:19