使用html的css样式
如何在第一个框的底部显示另一个框 如果您尝试此代码，这两个框将一起显示：使用html的css样式,css,Css,如何在第一个框的底部显示另一个框 如果您尝试此代码，这两个框将一起显示： A B 我希望它是这样的： A B 谢谢 === 这就是我所做的：但它走到了左边。我希望它保持在右边。以下是全部代码： <html> <head> <title>*|MC:SUBJECT|*</title> <meta http-equiv="Content-type" content="text/html; charset=ut
A B 我希望它是这样的：
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>
*|主持人：主题|*
p{页边距底部：10px；}
/**
*@制表页
*@section背景色
*@tip选择HTML电子邮件背景的颜色。您可以选择一个与您公司的品牌相匹配的品牌。
*@主题页
*/
正文{
/*@可编辑*/背景色：#FFFFFF；
文本对齐：居中；
}
#布局{
保证金：0自动；
文本对齐：左对齐；
}
/**
*@制表符标题
*@节头顶部
*@tip设置存档链接栏的外观。
*/
#标题顶部{
/*@可编辑*/背景色：#FFFFFF；
/*@可编辑*/边框顶部：0px无；
/*@可编辑*/边框底部：0px无；
/*@可编辑*/颜色：#505050；
/*@可编辑*/字体系列：Arial；
/*@可编辑*/字体大小：11px；
/*@可编辑*/字体样式：普通；
/*@可编辑*/字体大小：正常；
填充：15px 0 5px；
/*@可编辑*/文本对齐：居中；
}
/**
*@制表符标题
*@章节标题样式
*@tip消息正文中的标题和标题。把它们做成大的，容易阅读的。
*@主题标题
*/
.主要标题{
/*@可编辑*/颜色：#ACCB4E；
/*@可编辑*/字体系列：Arial；
/*@可编辑*/字体大小：48px；
/*@可编辑*/字体样式：普通；
/*@可编辑*/字体大小：正常；
/*@可编辑*/行高：100%；
保证金：0；
填充：0px；
/*@可编辑*/文本转换：大写；
}
/**
*@制表符标题
*@节字幕样式
*@tip这是出现在标题/标题下的署名文本。
*@主题字幕
*/
.第二标题{
/*@可编辑*/颜色：#ACCB4E；
/*@可编辑*/字体系列：Arial；
/*@可编辑*/字体大小：20px；
/*@可编辑*/字体样式：普通；
/*@可编辑*/字体大小：正常；
/*@可编辑*/行高：100%；
保证金：0；
填充：10px0；
/*@可编辑*/文本转换：大写；
}
/**
*@tab-Body
*@节内容
*@tip这是电子邮件主要内容的默认文本样式。
*@主题内容
*/
#内容左，#内容右{
/*@可编辑*/背景色：#FFFFFF；
/*@可编辑*/颜色：#808080；
/*@可编辑*/字体系列：Arial；
/*@可编辑*/字体大小：14px；
/*@可编辑*/字体样式：普通；
/*@可编辑*/字体大小：正常；
/*@可编辑*/行高：150%；
填充：15px 0 15px 20px；
垂直对齐：顶部；
宽度：300px；
}
#内容权{
垂直对齐：顶部；
}
/**
*@tab-Body
*@section绿色框
*@tip这是您电子邮件的绿色提示框的默认样式。
*@主题内容
*/
#绿箱{
/*@可编辑*/背景：#ACCB4E；
/*@可编辑*/颜色：#FFFFFF；
/*@可编辑*/字体系列：Arial；
/*@可编辑*/字体大小：16px；
/*@可编辑*/字体样式：普通；
/*@可编辑*/字体大小：正常；
/*@可编辑*/行高：150%；
边缘顶部：20px；
填充：10px 20px；
/*@可编辑*/文本转换：无；
}
/**
*@tab-Body
*@section绿色提示框标题
*@tip这是绿色提示框标题的默认样式。
*@主题内容
*/
#绿箱，副标题{
/*@可编辑*/颜色：#FFFFFF；
/*@可编辑*/字体系列：Arial；
/*@可编辑*/字体大小：20px；
/*@可编辑*/字体样式：普通；
/*@可编辑*/字体大小：正常；
}
/**
*@tab-Body
*@section侧边栏小部件标题
*@tip这是电子邮件边栏小部件的默认样式。
*@主题内容
*/
.副标题{
/*@可编辑*/颜色：#ACCB4E；
/*@可编辑*/字体系列：Arial；
/*@可编辑*/字体大小：18px；
/*@可编辑*/字体样式：普通；
/*@可编辑*/字体大小：正常；
/*@可编辑*/行高：100%；
/*@可编辑*/文本转换：无；
}
/**
*@tab-Body
*@section侧边栏小部件文本
*@tip这是电子邮件边栏小部件的默认样式。
*@主题内容
*/
.小部件{
/*@可编辑*/颜色：#808080；
/*@可编辑*/字体系列：Arial；
/*@可编辑*/字体大小：12px；
/*@可编辑*/字体样式：普通；
/*@可编辑*/字体大小：正常；
/*@可编辑*/行高：150%；
边缘顶部：20px；
边缘底部：15px；
宽度：260px；
}
/**
*@制表符页脚
*@节尾
*@tip你可以给你的页脚一个浅色背景，并用上边框隔开
*@主题页脚
*/
#页脚{
/*@可编辑*/背景色：#FFFFFF；
/*@可编辑*/边框顶部：0px无；
/*