對齊多個div底部的鏈接按鈕

Question

我對每個包含文本和按鈕的「框」使用響應靈活網格佈局;所有的盒子都是一樣的高度。我試圖讓按鈕對齊框的底部（認識邊距和填充）和彼此。

 
---------- ---------- ---------- 
| text | | text | | text | 
|  | | text | | text | 
|  | |  | | text | 
|  | |  | |  | 
| button | | button | | button | buttons aligned with each other at bottom of box 
---------- ---------- ---------- 

.container { 
 
    margin-left: auto; 
 
    margin-right: auto; 
 
    max-width: 100%; 
 
    width: 1170px; 
 
} 
 

 
.row { 
 
    display: flex; 
 
    flex-direction: row; 
 
    flex-wrap: wrap; 
 
} 
 

 
.col { 
 
    flex: 1 1 8%; 
 
    margin: 0; 
 
    padding: 0 0 0 1em; 
 
    box-sizing: border-box; 
 
} 
 

 
.col:first-child { padding-left: 0; } 
 
.col:last-child { padding-right: 0; } 
 

 
.col-span-1 { 
 
    flex-basis: 8.3333%; 
 
} 
 

 
article { 
 
    height:100%; 
 
    border:1px solid black; 
 
    padding:1em; 
 
} 
 

 
a.quickbutton { 
 
    color: #afafaf; 
 
    background-color: #fafafa; 
 
    background-image: none; 
 
    border: 0 none; 
 
    border-radius: 4px; 
 
    cursor: pointer; 
 
    display: block; 
 
    font-size: larger; 
 
    font-weight: 500; 
 
    margin-bottom: 4px; 
 
    padding: 1.5em; 
 
    text-align: center; 
 
    text-transform: uppercase; 
 
    white-space: normal; 
 
    max-width: 100%; 
 
    text-decoration:none; 
 
} 
 

 
a.quickbutton:hover { 
 
    background-color: #afafaf; 
 
    color: #fafafa; 
 
    text-decoration: none; 
 
} 
 

 
.bottom { 
 
    
 
    /*--------------------------------*/ 
 
    /* THIS IS WHERE I NEED SOMETHING */ 
 
    /*--------------------------------*/ 
 
    
 
    /* vertical-align: bottom; doesn't work */ 
 
    
 
    /* position:relative: bottom:0px; doesn't work */ 
 
} 
 

 

 
@media only screen and (max-width: 48em) { 
 
    .col-span-1 
 
    { 
 
    flex-basis: 100%; 
 
    padding:0; 
 
    } 
 
}

<div class="container"> 
 

 
    <div class="row"> 
 
    
 
     <div class="col col-span-1"> 
 
      <article> 
 
       <h2>Article 1</h2> 
 
       <p>Lorem ipsum dolor sit amet, at albucius nominavi mei. Dicant decore voluptatibus pro ei, eum aliquid eruditi mnesarchum id. Eam ad summo verterem vituperatoribus. Suscipit prodesset delicatissimi nam ei.</p> 
 
       <a href="#" class="quickbutton bottom">Button 1</a> 
 
      </article> 
 
     </div><!-- col --> 
 
     
 
    \t <div class="col col-span-1"> 
 
      <article> 
 
       <h2>Article 2</h2> 
 
       <p>Lorem ipsum dolor sit amet, at albucius nominavi mei. Dicant decore voluptatibus pro ei, eum aliquid eruditi mnesarchum id. Eam ad summo verterem vituperatoribus. Suscipit prodesset delicatissimi nam ei.</p> 
 
       <p>Commodo alienum ne cum, recteque torquatos an eum. Ad mandamus sententiae intellegebat mei, cum ut nostrum propriae gubergren. Vocent albucius intellegebat vix ex. Cetero vocent aperiam sit ad. Meis tritani vel ex, ne qui admodum repudiandae, civibus lucilius perfecto in qui. Nam eu debet soleat facete. Pro an quod meis tollit, eu nam interesset appellantur, te partiendo erroribus interpretaris eos.</p> 
 
       <a href="#" class="quickbutton bottom">Button 2</a> 
 
      </article> 
 
     </div><!-- col --> 
 
     
 
    \t <div class="col col-span-1"> 
 
      <article> 
 
       <h2>Article 3</h2> 
 
       <p>Lorem ipsum dolor sit amet, at albucius nominavi mei. Dicant decore voluptatibus pro ei, eum aliquid eruditi mnesarchum id. Eam ad summo verterem vituperatoribus. Suscipit prodesset delicatissimi nam ei.</p> 
 
       <p>Commodo alienum ne cum, recteque torquatos an eum. Ad mandamus sententiae intellegebat mei, cum ut nostrum propriae gubergren. Vocent albucius intellegebat vix ex. Cetero vocent aperiam sit ad. Meis tritani vel ex, ne qui admodum repudiandae, civibus lucilius perfecto in qui. Nam eu debet soleat facete. Pro an quod meis tollit, eu nam interesset appellantur, te partiendo erroribus interpretaris eos.</p> 
 
       <p>Ei has movet liberavisse. Sed errem ridens singulis te, mea liber homero doctus te, ne oratio aliquip antiopam vis. In graecis incorrupte accommodare nam. No pri malorum euismod dissentiet, vix ut ludus sententiae intellegebat. Esse labitur voluptatibus sed no, posidonium temporibus an nec.</p> 
 
       <a href="#" class="quickbutton bottom">Button 3</a> 
 
      </article> 
 
    \t </div><!-- col --> 
 
     
 
    </div><!-- row --> 
 

 
</div><!-- container -->

當然，箱應「崩潰」到它們的最小所需尺寸的移動設備或小屏幕上觀看時。

我真的很感謝一些幫助實現這一點，因爲它一直在瘋狂！如果還有其他改進，我願意學習更多。

TIA

Answer 1

見下

.container { 
 
    margin-left: auto; 
 
    margin-right: auto; 
 
    max-width: 100%; 
 
    width: 1170px; 
 
} 
 

 
.row { 
 
    display: flex; 
 
    flex-direction: row; 
 
    flex-wrap: wrap; 
 
} 
 

 
.col { 
 
    flex: 1 1 8%; 
 
    margin: 0; 
 
    padding: 0 0 0 1em; 
 
    box-sizing: border-box; 
 
} 
 

 
.col:first-child { padding-left: 0; } 
 
.col:last-child { padding-right: 0; } 
 

 
.col-span-1 { 
 
    flex-basis: 8.3333%; 
 
} 
 

 
article { 
 
    height: calc(100% - 100px - 2em); 
 
    border:1px solid black; 
 
    padding: 1em 1em calc(1em + 100px) 1em; 
 
    position: relative; 
 
} 
 

 
a.quickbutton { 
 
    color: #afafaf; 
 
    background-color: #fafafa; 
 
    background-image: none; 
 
    border: 0 none; 
 
    border-radius: 4px; 
 
    cursor: pointer; 
 
    display: block; 
 
    font-size: larger; 
 
    font-weight: 500; 
 
    margin-bottom: 4px; 
 
    padding: 1.5em; 
 
    text-align: center; 
 
    text-transform: uppercase; 
 
    white-space: normal; 
 
    max-width: 100%; 
 
    text-decoration:none; 
 
} 
 

 
a.quickbutton:hover { 
 
    background-color: #afafaf; 
 
    color: #fafafa; 
 
    text-decoration: none; 
 
} 
 

 
.bottom { 
 
    position:absolute; 
 
    bottom:1em; 
 
    height: 100px; 
 
    width: calc(100% - 2em); 
 
} 
 

 

 
@media only screen and (max-width: 48em) { 
 
    .col-span-1 
 
    { 
 
     flex-basis: 100%; 
 
     padding:0; 
 
    } 
 
}

<html> 
 
    <head> 
 
     <link rel="stylesheet" href="./styles.css"> 
 
    </head> 
 
    <body> 
 

 
    <div class="container"> 
 

 
     <div class="row"> 
 

 
      <div class="col col-span-1"> 
 
       <article> 
 
        <h2>Article 1</h2> 
 
        <p>Lorem ipsum dolor sit amet, at albucius nominavi mei. Dicant decore voluptatibus pro ei, eum aliquid eruditi mnesarchum id. Eam ad summo verterem vituperatoribus. Suscipit prodesset delicatissimi nam ei.</p> 
 
        <div class="bottom"><a href="#" class="quickbutton">Button 1</a></div> 
 
       </article> 
 
      </div><!-- col --> 
 

 
      <div class="col col-span-1"> 
 
       <article> 
 
        <h2>Article 2</h2> 
 
        <p>Lorem ipsum dolor sit amet, at albucius nominavi mei. Dicant decore voluptatibus pro ei, eum aliquid eruditi mnesarchum id. Eam ad summo verterem vituperatoribus. Suscipit prodesset delicatissimi nam ei.</p> 
 
        <p>Commodo alienum ne cum, recteque torquatos an eum. Ad mandamus sententiae intellegebat mei, cum ut nostrum propriae gubergren. Vocent albucius intellegebat vix ex. Cetero vocent aperiam sit ad. Meis tritani vel ex, ne qui admodum repudiandae, civibus lucilius perfecto in qui. Nam eu debet soleat facete. Pro an quod meis tollit, eu nam interesset appellantur, te partiendo erroribus interpretaris eos.</p> 
 
        <div class="bottom"><a href="#" class="quickbutton">Button 2</a></div> 
 
       </article> 
 
      </div><!-- col --> 
 

 
      <div class="col col-span-1"> 
 
       <article> 
 
        <h2>Article 3</h2> 
 
        <p>Lorem ipsum dolor sit amet, at albucius nominavi mei. Dicant decore voluptatibus pro ei, eum aliquid eruditi mnesarchum id. Eam ad summo verterem vituperatoribus. Suscipit prodesset delicatissimi nam ei.</p> 
 
        <p>Commodo alienum ne cum, recteque torquatos an eum. Ad mandamus sententiae intellegebat mei, cum ut nostrum propriae gubergren. Vocent albucius intellegebat vix ex. Cetero vocent aperiam sit ad. Meis tritani vel ex, ne qui admodum repudiandae, civibus lucilius perfecto in qui. Nam eu debet soleat facete. Pro an quod meis tollit, eu nam interesset appellantur, te partiendo erroribus interpretaris eos.</p> 
 
        <p>Ei has movet liberavisse. Sed errem ridens singulis te, mea liber homero doctus te, ne oratio aliquip antiopam vis. In graecis incorrupte accommodare nam. No pri malorum euismod dissentiet, vix ut ludus sententiae intellegebat. Esse labitur voluptatibus sed no, posidonium temporibus an nec.</p> 
 
        <div class="bottom"><a href="#" class="quickbutton">Button 3</a></div> 
 
       </article> 
 
      </div><!-- col --> 
 

 
     </div><!-- row --> 
 

 
    </div><!-- container --> 
 

 
    </body> 
 
</html>