包装和容器做不同的布局

时间：2017-01-25 20:35:54

标签： html css zurb-foundation

我需要使用基础框架制作响应式电子邮件，其中颜色为全宽（如下面的包装示例），文本居中（如容器示例）。我被困了，因为如果我使用包装类，文本向左飞，我无法将文本居中。如果我正在使用容器，我无法使颜色变为全宽，但文本居中。大约有10行，每行有不同的颜色。

The layout

使用包装器：

Wrapper Example 

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
  <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
  <meta name="viewport" content="width=device-width" />
  <title>Title</title>
  <link rel="stylesheet" href="css/foundation-emails.css" />
</head>

<body>
  <table align="center" class="wrapper">
    <tbody>
      <tr>
        <td>
          <table class="row">
            <tbody>
              <tr>
                <th class="small-12 large-12 columns first last" style="background-color: red;">
                  <table>
                    <tr>
                      <th>This is a column. Columns contain your content.</th>
                      <th class="expander"></th>
                    </tr>
                  </table>
                </th>
              </tr>
            </tbody>
          </table>
        </td>
      </tr>
    </tbody>
</table>
</body>
</html>

使用容器 Container Example 

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
  <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
  <meta name="viewport" content="width=device-width" />
  <title>Title</title>
  <link rel="stylesheet" href="css/foundation-emails.css" />
</head>

<body>
  <table align="center" class="container">
    <tbody>
      <tr>
        <td>
          <table class="row">
            <tbody>
              <tr>
                <th class="small-12 large-12 columns first last" style="background-color: red;">
                  <table>
                    <tr>
                      <th>This is a column. Columns contain your content.</th>
                      <th class="expander"></th>
                    </tr>
                  </table>
                </th>
              </tr>
            </tbody>
          </table>
        </td>
      </tr>
    </tbody>
</table>
</body>
</html>

1 个答案:

答案 0 :(得分：0)

您可以将background-color样式移动到正文而不是th上，并为table.container提供透明背景。那会有用吗？

＆＃13;
＆＃13; 
@import url(https://cdnjs.cloudflare.com/ajax/libs/foundation-emails/2.2.1/foundation-emails.min.css)
＆＃13; 
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
  <head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <meta name="viewport" content="width=device-width" />
    <title>Title</title>
    <link rel="stylesheet" href="css/foundation-emails.css" />
  </head>

  <body>
    <div style="background-color: red;">
      <table align="center" class="container" style="background-color: transparent;">
        <tbody>
          <tr>
            <td>
              <table class="row">
                <tbody>
                  <tr>
                    <th class="small-12 large-12 columns first last">
                      <table>
                        <tr>
                          <th>This is a column. Columns contain your content. Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</th>
                          <th class="expander"></th>
                        </tr>
                      </table>
                    </th>
                  </tr>
                </tbody>
              </table>
            </td>
          </tr>
        </tbody>
      </table>
    </div>
    <div style="background-color: green;">
      <table align="center" class="container" style="background-color: transparent;">
        <tbody>
          <tr>
            <td>
              <table class="row">
                <tbody>
                  <tr>
                    <th class="small-12 large-12 columns first last">
                      <table>
                        <tr>
                          <th>This is a column. Columns contain your content. Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</th>
                          <th class="expander"></th>
                        </tr>
                      </table>
                    </th>
                  </tr>
                </tbody>
              </table>
            </td>
          </tr>
        </tbody>
      </table>
    </div>
  </body>
</html>
＆＃13;
＆＃13;
＆＃13;

编辑：

这是一个基于我可以从框架中拼凑出来的响应能力的工作版本。

＆＃13;
＆＃13; 
@import url(https://cdnjs.cloudflare.com/ajax/libs/foundation-emails/2.2.1/foundation-emails.min.css)
＆＃13; 
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
  <head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <meta name="viewport" content="width=device-width" />
    <title>Title</title>
    <link rel="stylesheet" href="css/foundation-emails.css" />
  </head>

  <body>
    <table class="body">
      <tbody><tr>
        <td class="center" align="center" valign="top">
          <table align="center" class="wrapper header float-center" style="background-color:red"><tbody><tr><td class="wrapper-inner">
            <table align="center" class="container" style="background-color:transparent"><tbody><tr><td>

              <!-- single column row -->
              <table class="row collapse"><tbody><tr>
                <th>This is a column. Columns contain your content. Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</th>
                </tr></tbody></table>
                
            </td></tr></tbody></table>
          </td></tr></tbody></table>
          <table align="center" class="wrapper header float-center" style="background-color:green"><tbody><tr><td class="wrapper-inner">
            <table align="center" class="container" style="background-color:transparent"><tbody><tr><td>

              <!-- two column row -->
              <table class="row collapse"><tbody><tr>
                <th class="small-6 large-6 columns first"><table><tbody><tr><th>
                  <p>BASIC</p>
                  </th></tr></tbody></table></th>
                <th class="small-6 large-6 columns last"><table><tbody><tr><th>
                  <p>BASIC</p>
                  </th></tr></tbody></table></th>
                </tr></tbody></table>

            </td></tr></tbody></table>
          </td></tr></tbody></table>
        </td>
        </tr></tbody>
    </table>
  </body>
</html>
＆＃13;
＆＃13;
＆＃13;

相关问题
最新问题