內容底部對齊不起作用，無法弄清楚爲什麼

在網頁內容上，我嘗試對齊頂部和底部的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。

它在這裏不起作用。我做錯了什麼？

來源

2015-12-09 Adrien Lafond

你能告訴我們首選的HTML？這完全有可能不使用表格和只是flexbox。 –

[對齊Flex項目的方法]（http://stackoverflow.com/a/33856609/3597276） –

我會建議不被使用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>

來源

2015-12-09 12:30:44 DavidDomain

訣竅其實就是.module {align-items：baseline; justify-content：space-between}但我找不出原因。你能解釋一下嗎？ –

'align-items'實際上不需要在這裏。我刪除了它，並添加了一些關於如何工作的更多解釋。最主要的是'.module'的'flex-direction'設置爲'column'，'justify-content'設置爲'space-between'將會處理剩下的事情。希望現在有點清楚。 ;-) – DavidDomain

啊THX，現在很清楚。這很棘手，因爲內容通常指的是橫軸。不知道設置爲列的flex-direction會更改主軸，因此，justify-content默認行爲:) –

你可以試試這個：

<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

來源

2015-12-09 12:25:28

添加這個CSS

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

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

來源

2015-12-09 12:29:33

嘗試這可能會幫助你在你的風格

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

來源

2015-12-09 12:38:00

內容底部對齊不起作用，無法弄清楚爲什麼

回答

相關問題