Html 内容的底部对齐方式不为'；不工作，可以'；我不明白为什么

在网页内容上，我尝试在顶部和底部对齐3个模块的内容

使用flex，三个模块具有相同的高度。模块标题与顶部对齐良好。 但是不可能将按钮底部对齐：

#容器{
显示器：flex；
对齐项目：拉伸；
}
.模块{
右边距：2米；
边框：1px纯白；
弹性基准：30%；
}

标题
标语
模块1

同侧眼睑

同侧眼睑

同侧眼睑

模块2

模块3

同侧眼睑

您可以试试这个：

<div style="text-align: center;">
    <h1>Title</h1>
      <h2>tagline</h2>
    <div id="container">
      <!-- Module1 -->
      <div class="module" style="background-color: red;">
        <table>
          <tbody>
            <tr>
              <td valign="top">
                <p><strong>Module 1</strong></p>
                <p>lorem ipsum</p>
                <p>lorem ipsum</p>
                <p>lorem ipsum</p>
              </td>
            </tr>
            <tr>
              <td valign="bottom">
                <div id="mc_embed_signup">
                  <form>
                    <div>
                      <div><input name="EMAIL" type="email" value="" placeholder="email address" /></div>

                     </div>
                    <br/>
                      <div><input type="submit" value="button" /></div>
                    </div>
                  </form>
                </div>
              </td>
            </tr>

          </tbody>
        </table>
      </div>
      <!-- Fin module 1, début module 2 -->
      <div class="module" style="background-color: green;">
        <table>
          <tbody>
            <tr>
              <td valign="top">
                <p><strong>Module 2</strong></p>
              </td>
            </tr>
            <tr>
              <td valign="bottom">
                <div>
                  <form>
                    <div>
                      <div><input name="EMAIL" type="email" placeholder="email address" /></div>

                     </div>
                    <br/>
                      <div class="clear"><input name="subscribe" type="submit" value="button" /></div>
                    </div>
                  </form>
                </div>
              </td>
            </tr>

          </tbody>
        </table>
      </div>
<!-- Fin module 2, début module 3 -->
      <div class="module" style="background-color: yellow;">
        <table>
          <tbody>
            <tr>
              <td valign="top">
                <p><strong>Module 3</strong></p>
                <p>lorem ipsum</p>
              </td>
            </tr>
            <tr>
              <td valign="bottom">
                <div>
                  <form>
                    <div>
                      <div ><input name="EMAIL" type="email" placeholder="email address" /></div>

                     </div>
                    <br/>
                      <div class="clear"><input name="subscribe" type="submit" value="button" /></div>
                    </div>
                  </form>
                </div>
              </td>
            </tr>

          </tbody>
        </table>
      </div>
      <!-- Fin module 3 -->
    </div>
</div>

标题
标语
模块1

同侧眼睑

同侧眼睑

同侧眼睑



模块2



模块3

同侧眼睑

您可以试试这个：

<div style="text-align: center;">
    <h1>Title</h1>
      <h2>tagline</h2>
    <div id="container">
      <!-- Module1 -->
      <div class="module" style="background-color: red;">
        <table>
          <tbody>
            <tr>
              <td valign="top">
                <p><strong>Module 1</strong></p>
                <p>lorem ipsum</p>
                <p>lorem ipsum</p>
                <p>lorem ipsum</p>
              </td>
            </tr>
            <tr>
              <td valign="bottom">
                <div id="mc_embed_signup">
                  <form>
                    <div>
                      <div><input name="EMAIL" type="email" value="" placeholder="email address" /></div>

                     </div>
                    <br/>
                      <div><input type="submit" value="button" /></div>
                    </div>
                  </form>
                </div>
              </td>
            </tr>

          </tbody>
        </table>
      </div>
      <!-- Fin module 1, début module 2 -->
      <div class="module" style="background-color: green;">
        <table>
          <tbody>
            <tr>
              <td valign="top">
                <p><strong>Module 2</strong></p>
              </td>
            </tr>
            <tr>
              <td valign="bottom">
                <div>
                  <form>
                    <div>
                      <div><input name="EMAIL" type="email" placeholder="email address" /></div>

                     </div>
                    <br/>
                      <div class="clear"><input name="subscribe" type="submit" value="button" /></div>
                    </div>
                  </form>
                </div>
              </td>
            </tr>

          </tbody>
        </table>
      </div>
<!-- Fin module 2, début module 3 -->
      <div class="module" style="background-color: yellow;">
        <table>
          <tbody>
            <tr>
              <td valign="top">
                <p><strong>Module 3</strong></p>
                <p>lorem ipsum</p>
              </td>
            </tr>
            <tr>
              <td valign="bottom">
                <div>
                  <form>
                    <div>
                      <div ><input name="EMAIL" type="email" placeholder="email address" /></div>

                     </div>
                    <br/>
                      <div class="clear"><input name="subscribe" type="submit" value="button" /></div>
                    </div>
                  </form>
                </div>
              </td>
            </tr>

          </tbody>
        </table>
      </div>
      <!-- Fin module 3 -->
    </div>
</div>

标题
标语
模块1

同侧眼睑

同侧眼睑

同侧眼睑



模块2



模块3

同侧眼睑

添加此css

  .module table {min-height:100%; height:100%;}

演示链接

添加此css

  .module table {min-height:100%; height:100%;}

演示链接

---

我建议不要在这里使用

表格

布局。由于您使用的是

flex

布局，您可以通过将模块设置为

display:flex

并使用

对齐内容

，使

按钮和
输入
字段底部对齐

更新：

为了更具体地解释为什么会这样，让我试着详细解释一下。

模块
元素的
弹性方向
设置为
列
。我在这里使用的是
flex-flow
，它结合了
flex-direction
和
flex-wrap
。这将强制将
.module子元素
从上到下排列


列

flex容器