html - 文本展开列宽

Question

我遇到了很多问题，过去几个小时我都试图解决这个问题。我不明白为什么我的文本在此处左对齐:My Example Site

带有黄色背景的文本也向左对齐，我用我制作的 .content 类解决了这个问题。

我试图再次在我的文本上设置该类，但它似乎不起作用。我在 foundation framework 工作用于电子邮件通讯。

.bgcolor {
  background-color: #fff;
}
.bgcolor--blue {
  background-color: #ccd8db;
}
.bgcolor--content--light {
  background-color: #ebe4cf;
}
.bgcolor--footer {
  background-color: #e8e8e8;
}
/* Images */

.image--center {
  text-align: center;
}
.image--center__inline {
  display: inline-block;
}
.content {
  padding: 15px;
  max-width: 500px;
  margin: 0 auto;
  display: block;
}

<table class="wrapper" align="center">
  <tr>
    <td class="wrapper-inner">
      <!-- Row 1 -->
      <table class="row collapse bgcolor">
        <tbody>
          <tr>
            <th class="small-12 large-12 columns first">
              <table>
                <tr>
                  <th class="image--center">
                    <a href="https://www.google.dk/">
                      <img src="http://3.bp.blogspot.com/-Z4vZ7AsD6Bc/T_PNRK_9f2I/AAAAAAAAAH4/t3UZ3BQyqdE/s1600/shutterstock.jpg" alt="test" align="center" class="float-center image--center__inline">
                    </a>
                  </th>
                  <th class="expander"></th>
                </tr>
              </table>
            </th>
          </tr>
        </tbody>
      </table>
      <!-- Row 2 -->
      <table class="row collapse bgcolor--blue">
        <tbody>
          <tr>
            <th class="small-12 large-12 columns">
              <table>
                <tr>
                  <th class="image--center">
                    <a href="https://www.google.dk/">
                      <img src="http://24.media.tumblr.com/7a40daf7853d830815fb83f79752e94a/tumblr_mz2izkaidT1rfn9zxo4_500.png" alt="test" align="center" class="float-center image--center__inline">
                    </a>
                  </th>
                  <th class="expander"></th>
                </tr>
              </table>
            </th>
          </tr>
        </tbody>
      </table>
      <!-- Row 3 -->
      <table class="row collapse bgcolor--content--light">
        <tbody>
          <tr>
            <th class="small-12 large-12 columns">
              <table>
                <tr>
                  <th class="content">
                    <h3>Headline</h3>
                    <p>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s
                    </p>
                    <br/>
                    <p>Lorem Ipsum is simply dummy text of the printing and typesetting industry.</p>
                    <br/>
                    <p>Best Regards</p>

                    <p>Company Name</p>
                    <br/>
                    <p>Lorem Ipsum is simply dummy text of the printing and typesetting industry.
                    </p>
                    <br/>
                    <a href="#">Lorem Ipsum is simply dummy text of the printing</a>
                  </th>
                  <th class="expander"></th>
                </tr>
              </table>
            </th>
          </tr>
        </tbody>
      </table>
      <!-- Row 4 -->
      <!-- HERE THE PROBLEM IS -->
      <table class="row collapse bgcolor">
        <tbody>
          <tr>
            <th class="small-12 large-6 columns">
              <table>
                <tr>
                  <th class="content">
                    <p>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type
                      specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages,
                      and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.</p>
                  </th>
                </tr>
              </table>
            </th>
            <th class="small-12 large-6 columns">
              <table>
                <tr>
                  <th class="content">
                    <p>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type
                      specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages,
                      and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.</p>
                  </th>
                </tr>
              </table>
            </th>

            <th class="expander"></th>
          </tr>
        </tbody>
      </table>

    </td>
  </tr>
</table>

Answer 1

只需将类“content”添加到第 4 行的表中，如下所示:

<table class="row collapse bgcolor content">