包装
包装器会创建必要的结构来包装元素,以便应用全宽背景。
基础
使用 Inky HTML 时,<wrapper>
标签将创建一个 <table>
、<tr>
、<th>
结构,以创建一致的全宽背景。您可以在包装器中添加类以针对其 CSS 属性或其中的目标元素。.wrapper-inner
类可用于为包装器添加内边距。
HTML
<wrapper>
content
</wrapper>
<html>
<head></head>
<body>
<table class="wrapper" align="center">
<tbody>
<tr>
<td class="wrapper-inner">
content
</td>
</tr>
</tbody>
</table>
</body>
</html>
演示
完整的(流体)宽度页眉或页脚
使用 <wrapper>
组件创建流体页眉非常简单。包装一个 <container>
将使您的内容保持在容器的宽度内。在 <wrapper class="">
中添加一个类以添加背景颜色。
HTML
<style type="text/css">
.header {
background: #8a8a8a;
}
.header .columns {
padding-bottom: 0;
}
.header p {
color: #fff;
margin-bottom: 0;
}
.header .wrapper-inner {
padding: 20px; /*controls the height of the header*/
}
.header .container {
background: #8a8a8a;
}
.wrapper.secondary {
background: #f3f3f3;
}
</style>
<wrapper class="header" bgcolor="#8a8a8a">
<container>
<row class="collapse">
<columns small="6" valign="middle">
<img src="https://placehold.it/200x50/663399">
</columns>
<columns small="6" valign="middle">
<p class="text-right">BASIC</p>
</columns>
</row>
</container>
</wrapper>
<html>
<head>
<style type="text/css">
.header {
background: #8a8a8a;
}
.header .columns {
padding-bottom: 0;
}
.header p {
color: #fff;
margin-bottom: 0;
}
.header .wrapper-inner {
padding: 20px;
/*controls the height of the header*/
}
.header .container {
background: #8a8a8a;
}
.wrapper.secondary {
background: #f3f3f3;
}
</style>
</head>
<body>
<table bgcolor="#8a8a8a" class="wrapper header" align="center">
<tbody>
<tr>
<td class="wrapper-inner">
<table align="center" class="container">
<tbody>
<tr>
<td>
<table class="row collapse">
<tbody>
<tr>
<th class="small-6 large-6 columns first" valign="middle">
<table>
<tbody>
<tr>
<th>
<img src="https://placehold.it/200x50/663399">
</th>
</tr>
</tbody>
</table>
</th>
<th class="small-6 large-6 columns last" valign="middle">
<table>
<tbody>
<tr>
<th>
<p class="text-right">BASIC</p>
</th>
</tr>
</tbody>
</table>
</th>
</tr>
</tbody>
</table>‍
</td>
</tr>
</tbody>
</table>
</td>
</tr>
</tbody>
</table>
</body>
</html>
演示
在容器外部使用此结构将产生一个流体宽度背景,该背景将扩展到电子邮件客户端视区的宽度。