基础

包装

包装器会创建必要的结构来包装元素,以便应用全宽背景。

基础

使用 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>&zwj;
                </td>
              </tr>
            </tbody>
          </table>
        </td>
      </tr>
    </tbody>
  </table>
</body>

</html>

演示

在容器外部使用此结构将产生一个流体宽度背景,该背景将扩展到电子邮件客户端视区的宽度。