Wie man mehrere Tasten an mehrere Panels mit unterschiedlichem Inhalt klebt

Question

Ich habe eine Website (http://defensemonkees.nl/) und wir haben 3 Panels auf der Indexseite. Ich habe eine Flex-Box mit 3 Stücken gemacht und dann habe ich Stretch verwendet, um alle Paneele auf die gleiche Höhe zu bringen. Aber ich möchte, dass die Knöpfe unten bleiben. Ich habe eine Sticky-Footer-Methode ausprobiert, aber es funktioniert nur auf einer Taste gleichzeitig. In diesem Fall wäre es sogar einfacher, nur einen Rand oben auf den 2 linken Tasten zu haben. Aber ich denke, dass es eine sauberere Lösung geben muss, um das Problem im Allgemeinen zu lösen, anstatt nur "hard-code". Ich habe nicht alle CSS gepostet, weil das meiste davon von Bootstrap behandelt wird.

<div id="flexBox3Monkees"> 

     <div class="panel panel-default item"> 
       <div class="panel-heading"> 
        <h3 class="panel-title">Voor wie?</h3> 
       </div> 
       <!-- end panel-heading --> 
       <img src="Content/Images/WebMonkee.png" alt="DefenseMonkees Logo" class="img-circle monkeyPic" /> 
       <p class="indexP"> 
        Krav Maga is geschikt voor iedereen! Geen enkele ervaring met zelfverdediging? 
       Jong, oud, man, vrouw, sportief en 'niet' sportief, bij DefenseMonkees begeleiden wij 
       u stap voor stap zodat u een conflict ontloopt of be&euml;indigd op de meest effici&euml;nte manier. 
       We simuleren realistische situaties en zorgen er samen voor dat u een uitstekende 
       conditie krijgt! 
       </p> 
       <div class="indexbutton"> 
        <a href="../Fotos.aspx" class="btn btn-warning btn-block">Impressie</a> 
       </div> 
      </div> 
      <div class="panel panel-default item"> 
       <div class="panel-heading"> 
        <h3 class="panel-title">DefenseMonkees</h3> 
       </div> 
       <!-- end panel-heading --> 
       <img src="Content/Images/WebMonkee.png" alt="Logo DefenseMonkees" class="img-circle monkeyPic" /> 
       <p class="indexP"> 
        De instructeurs van DefenseMonkees zijn er trots op dat vrijwel al onze studenten 
       in een vrij korte periode van inspanning een gezonder en fitter lichaam hebben gekregen, 
       zich veiliger zijn gaan voelen en zelfverzekerder over straat durven. Dit motiveert 
       DefenseMonkees om continu de beste resultaten te blijven na streven. 
       </p> 
       <div class="indexbutton buttonPositionCustom2I"> 
        <a href="Succes.aspx" class="btn btn-info btn-block indexbutton">Succes verhalen</a> 
       </div> 
      </div> 
     <!-- end panel --> 

      <div id="indexPanel" class="panel panel-default item"> 
       <div class="panel-heading"> 
        <h3 class="panel-title"><%= GetNextTraningDate() %> </h3> 
       </div> 
       <!-- end panel-heading --> 
       <img src="Content/Images/WebMonkee.png" alt="Logo DefenseMonkees" class="img-circle monkeyPic" /> 
       <p class="indexP">Voor maar &#8364;36 per maand kunt u bij DefensMonkees 8 keer per maand trainen in Maastricht, Heerlen, Sittard of Utrecht.</p> 

       <p class="indexP"> 
        Wees gerust, beginnen is heel eenvoudig! Onze professionele instructeurs begeleiden u 
       stap voor stap dus wacht niet langer en neem vanavond nog een gratis proefles. 
       </p> 
       <div class="indexbutton buttonPositionCustom3I"> 
        <a href="Proefles.aspx" id="buttonRed" class="btn btn-danger btn-block indexbutton"> 
         <span class="glyphicon glyphicon-hand-up"></span>&nbsp;&nbsp;Boek gratis proefles</a> 
       </div> 
      </div> 
     </div> 

CSS

#flexBox3Monkees { 
    display: flex; 
    justify-content: space-around; 
    align-items: stretch; 
    text-align: center; 
} 

.item { 
    /*border: black 2px solid;*/ 
    width: 30%; 
} 

@media(max-width:767px) { 
    #flexBox3Monkees { 
     flex-direction: column; 
     margin-top: 40px; 
    } 

    .item { 
     width: 100%; 

    } 
} 

Answer 1

die Sie interessieren? DEMO

.item { 
 
    display: flex; 
 
    flex-direction: column; 
 
} 
 
.panel-heading { 
 
    flex: 0 0 100%; 
 
} 
 

 
img { 
 
    flex: 0 0 100%; 
 
} 
 

 
p { 
 
    flex: 1; 
 
} 
 

 
.indexbutton { 
 
    flex: 0 0 100%; 
 
}