内容底部对齐不起作用，无法弄清楚为什么

Question

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

使用flex，3个模块具有相同的高度。模块标题很好地对齐。 但不可能底部对齐按钮：

#container { 
 
\t \t display: flex; 
 
\t \t align-items: stretch; 
 
\t } 
 
\t 
 
\t .module { 
 
\t \t margin-right: 2em; 
 
\t \t border: 1px solid white; 
 
\t \t flex-basis: 30%; 
 
\t }

<div style="text-align: center;"> 
 
    \t <h1>Title</h1> 
 
\t <h2>tagline</h2> 
 
\t <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> 
 
        
 
         <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> 
 
        
 
         <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> 
 
        
 
         <div class="clear"><input name="subscribe" type="submit" value="button" /></div> 
 
        </div> 
 
        </form> 
 
       </div> 
 
       </td> 
 
      </tr> 
 
      
 
      </tbody> 
 
     </table> 
 
     </div> 
 
     <!-- Fin module 3 --> 
 
    </div> 
 
</div>

为了实现这个底部对齐，我用一个简单的表的HTML代码，as suggested here。

它在这里不起作用。我做错了什么？

Answer 1

我会建议不被使用table拉你在这里。由于您使用的是flex布局，因此您可以轻松地将buttons和input字段与底部对齐，方法是将模块设置为display:flex，并使用justify-content和space-between。

更新：

是有点为什么这个作品更具体的，让我尝试详细解释一下。
.module元素的flex-direction设置为column。我在这里使用flex-flow，它结合了flex-direction和flex-wrap。这将迫使.module-child元素从上到下布局。

flex-direction

柱

柔性容器的主轴线是相同的块轴。主要起点和主要终点与写作模式的前后点相同。

现在设置justify-content到space-between将确保，即柔性物品
（.module-child元素）均匀地沿直线分布。开始行的第一个项目和结束行的最后一个项目。

justify-content

空间之间

的Flex项目均匀沿线分布。间隔完成，例如两个相邻物品之间的间距相同。主起始边缘和主端边缘分别用第一个和最后一个柔性物品边缘进行冲洗。

希望这个现在更有意义。

这里的例子。我不得不删除这些内联样式。 ;-)

.main { 
 
    text-align: center; 
 
} 
 

 
#container { 
 
    display: flex; 
 
    justify-content: center; 
 
    align-items: stretch; 
 
} 
 

 
.module { 
 
    display: flex; 
 
    flex-flow: column nowrap; 
 
    justify-content: space-between; 
 
    flex-basis: 30%; 
 
    margin: 0 1em; 
 
    padding: 10px; 
 
    border: 1px solid white; 
 
} 
 

 
.module:nth-child(1) { 
 
    background-color: red; 
 
} 
 
.module:nth-child(2) { 
 
    background-color: green; 
 
} 
 
.module:nth-child(3) { 
 
    background-color: yellow; 
 
} 
 

 
.module-child { 
 
    width: 100%; 
 
}

<div class="main"> 
 
    <h1>Title</h1> 
 
    <h2>tagline</h2> 
 
    <div id="container"> 
 
    <!-- Module1 --> 
 
    <div class="module"> 
 
     <div class="module-child"> 
 
     <p><strong>Module 1</strong></p> 
 
     <p>lorem ipsum</p> 
 
     <p>lorem ipsum</p> 
 
     <p>lorem ipsum</p> 
 
     </div> 
 
     <div id="mc_embed_signup" class="module-child"> 
 
     <form> 
 
      <div> 
 
      <div><input name="EMAIL" type="email" value="" placeholder="email address" /></div> 
 
      <div><input type="submit" value="button" /></div> 
 
      </div> 
 
     </form> 
 
     </div> 
 
    </div> 
 
    <!-- Module2 --> 
 
    <div class="module"> 
 
     <div class="module-child"> 
 
     <p><strong>Module 2</strong></p> 
 
     <p>lorem ipsum</p> 
 
     </div> 
 
     <div id="mc_embed_signup" class="module-child"> 
 
     <form> 
 
      <div> 
 
      <div><input name="EMAIL" type="email" value="" placeholder="email address" /></div> 
 
      <div><input type="submit" value="button" /></div> 
 
      </div> 
 
     </form> 
 
     </div> 
 
    </div> 
 
    <!-- Module3 --> 
 
    <div class="module"> 
 
     <div class="module-child"> 
 
     <p><strong>Module 3</strong></p> 
 
     <p>lorem ipsum</p> 
 
     </div> 
 
     <div id="mc_embed_signup" class="module-child"> 
 
     <form> 
 
      <div> 
 
      <div><input name="EMAIL" type="email" value="" placeholder="email address" /></div> 
 
      <div><input type="submit" value="button" /></div> 
 
      </div> 
 
     </form> 
 
     </div> 
 
    </div> 
 
    </div> 
 
</div>

Answer 2

你可以试试这个：

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

DEMO HERE

Answer 3

添加这个CSS

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

演示链接 http://jsfiddle.net/qhpgk7nw/2/

Answer 4

尝试这可能会帮助你在你的风格

<style> 
#container 
{ 
display: flex; 
align-items: stretch; 
justify-content: center; 
} 

.module 
{ 
margin-right: 2em; 
border: 1px solid white; 
flex-basis: 30%; 
display: flex; 
align-items: center; 
justify-content: center; 
} 
.module tr:nth-child(2) 
{ 
height: 7em; 
} 
.module tr:nth-child(1) 
{ 
align-self: flex-start; 
} 
.module tr:nth-child(3) 
{ 
align-self: flex-end; 
} 
</style> 

在HTML

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

       </td> 
      </tr> 
      <tr> 
      <td><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> 

         <div><input type="submit" value="button" /></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> 
      </td> 
      </tr> 
      <tr> 
       <td valign="bottom"> 
       <div> 
        <form> 
        <div> 
         <div><input name="EMAIL" type="email" placeholder="email address" /></div> 

        </div> 

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

       </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> 

       </td> 
      </tr> 
        <tr> 
      <td> <p>lorem ipsum</p> 
      </td> 
      </tr> 
      <tr> 
       <td valign="bottom"> 
       <div> 
        <form> 
        <div> 
         <div ><input name="EMAIL" type="email" placeholder="email address" /></div> 

        </div> 

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

       </td> 
      </tr> 

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