Foundation

包裝器

包裝器建立必要的結構來包裝元素,以便套用全寬背景。

基礎

使用 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>

示範

在容器外使用此結構會產生流動寬度背景,並擴展至電子郵件用戶端視窗的寬度。