Farklı içeriğe sahip birden çok panele çoklu düğmeler nasıl yapıştırılır

Question

Web sitem (http://defensemonkees.nl/) var ve dizin sayfasında 3 panele sahibiz. İçinde 3 madde olan bir esnek kutu yaptım ve sonra tüm panelleri aynı yükseklikte yapmak için streç kullandım. Ama düğmelerin dibe yapışmasını istiyorum. Yapışkan altbilgi yöntemini denedim, ancak her seferinde yalnızca bir düğmede çalışır. Bu durumda, sadece 2 sol düğme üzerinde bir kenar boşluğu daha kolay olurdu. Ancak, sorunun sadece "sabit kod" yerine genel olarak çözülmesi için daha temiz bir çözüm bulunması gerektiğini düşünüyorum. Çoğu CSS'nin nedenini yayınlamamıştım, bunun çoğu Bootstrap tarafından ele alındı.

<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

bu deneyin? 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%; 
 
}