CSS DIV Inline in fondo

Question

Ho 3 divisioni per inserire inline allo bottom. Non ho idea di come farlo ... qualcuno mi può aiutare?

Il risultato atteso:

I codici che ho provato:

.feature-description 
 
{ 
 
    margin-top: 20px; 
 
    padding-left:10%; 
 
    padding-right:10%; 
 
} 
 
.start-up-phase 
 
{ 
 
    background-color: #a82327; 
 
    color: #fff; 
 
    padding: 13px 22px 100px; 
 
    text-align: justify; 
 
    width:86%; 
 
    margin-left:auto; 
 
    margin-right:auto; 
 
    min-height:350px; 
 
} 
 
.growth-phase 
 
{ 
 
    background-color: #196b8c; 
 
    color: #fff; 
 
    padding: 13px 22px 110px; 
 
    text-align: justify; 
 
    width:86%; 
 
    margin-left:auto; 
 
    margin-right:auto; 
 
    min-height:450px; 
 
} 
 
.expansion-phase 
 
{ 
 
    background-color: #53752f; 
 
    color: #fff; 
 
    padding: 13px 22px 200px; 
 
    text-align: justify; 
 
    width:86%; 
 
    margin-left:auto; 
 
    margin-right:auto; 
 
} 
 
.phase-title 
 
{ 
 
    border-bottom: 1px solid #fff; 
 
    padding-bottom:10px; 
 
} 
 
.phase-content 
 
{ 
 
    padding-top:5px; 
 
}

<!-- Latest compiled and minified CSS --> 
 
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" integrity="sha384-1q8mTJOASx8j1Au+a5WDVnPi2lkFfwwEAa8hDDdjZlpLegxhjVME1fgjWPGmkzs7" crossorigin="anonymous"> 
 

 
<!-- Optional theme --> 
 
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap-theme.min.css" integrity="sha384-fLW2N01lMqjakBkx3l/M9EahuwpSfeNvV63J5ezn3uZzapT0u7EYsXMjQV+0En5r" crossorigin="anonymous"> 
 

 
<!-- Latest compiled and minified JavaScript --> 
 
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js" integrity="sha384-0mSbJDEHialfmuBBQP6A4Qrprq5OVfW37PRR3j5ELqxss1yVqOtnepnHVP9aJ7xS" crossorigin="anonymous"></script> 
 
<div class="container"> 
 
<div class="row feature-description"> 
 
    <div class="col-lg-4"> 
 
    <div class="start-up-phase"> 
 
     <h4 class="phase-title"> 
 
     <strong>START UP PHASE</strong> 
 
     </h4> 
 
     <div class="phase-content"> 
 
     Startup phase is very crucial as reseller develop their first business partners group and hands on learning about their business culture, products and other important skills with the support of the leaders. At this point, reseller will get the most from own effort and rewarded from the initial group development. 
 
     <?php load_helper('html'); echo br(4) ?> 
 
     <p> 
 
      High Margin Retail Opportunities, Personal Residual Income, Introducer Bonus and Group Placement Incentive dedicated for reseller in this phase. 
 
     </p> 
 
     </div> 
 
    </div> 
 
    </div> 
 
    <div class="col-lg-4"> 
 
    <div class="growth-phase"> 
 
     <h4 class="phase-title"> 
 
     <strong>START UP PHASE</strong> 
 
     </h4> 
 
     <div class="phase-content"> 
 
     Startup phase is very crucial as reseller develop their first business partners group and hands on learning about their business culture, products and other important skills with the support of the leaders. At this point, reseller will get the most from own effort and rewarded from the initial group development. 
 
     </div> 
 
    </div> 
 
    </div> 
 
    <div class="col-lg-4"> 
 
    <div class="expansion-phase"> 
 
     <h4 class="phase-title"> 
 
     <strong>START UP PHASE</strong> 
 
     </h4> 
 
     <div class="phase-content"> 
 
     Startup phase is very crucial as reseller develop their first business partners group and hands on learning about their business culture, products and other important skills with the support of the leaders. At this point, reseller will get the most from own effort and rewarded from the initial group development. 
 
     </div> 
 
    </div> 
 
    </div> 
 
</div> 
 
    </div>

Answer 1

È possibile utilizzare FlexBox con le media query per fare questo https://jsfiddle.net/2Lzo9vfc/227/

@media(min-width: 1200px) { 
    .row.feature-description { 
     display: -webkit-flex; 
     display: flex; 
     -webkit-align-items: flex-end; 
     align-items: flex-end; 
    } 
} 

Answer 2

Sfortunatamente, l'uso galleggiante bootstrap per il suo sistema di griglia. Quindi l'allineamento verticale è un po 'approssimativo da applicare. È possibile scegliere di utilizzare la visualizzazione: blocco o visualizzazione in linea: tabella (con display: tabella-cella su childrens) per ottenere il risultato. Quindi devi solo specificare un allineamento verticale: in basso.

Answer 3

È possibile utilizzare display:inline-block e non dimenticate che è remove the extra spaces occuered da display:inline-block

.col-lg-4 { 
    display: inline-block; 
    vertical-align: bottom; 
    float:none; 
} 

Jsfiddle

Answer 4

questo aggiustalo per andare in fondo, anche con bootstrap.

.feature-description 
{ 
    align-items: flex-end; 
    display: flex; 
} 

per farlo sembrare come una scala si dovrebbe cambiare il padding

.start-up-phase 
{ 
    padding: 13px 22px; 
} 

.growth-phase 
{ 
    padding: 13px; 
} 

.feature-description { 
 
    margin-top: 20px; 
 
    padding-left: 10%; 
 
    padding-right: 10%; 
 
    align-items: flex-end; 
 
    display: flex; 
 
} 
 
.start-up-phase { 
 
    background-color: #a82327; 
 
    color: #fff; 
 
    padding: 13px 22px; 
 
    text-align: justify; 
 
    width: 86%; 
 
    margin-left: auto; 
 
    margin-right: auto; 
 
    min-height: 350px; 
 
} 
 
.growth-phase { 
 
    background-color: #196b8c; 
 
    color: #fff; 
 
    padding: 13px; 
 
    text-align: justify; 
 
    width: 86%; 
 
    margin-left: auto; 
 
    margin-right: auto; 
 
    min-height: 450px; 
 
} 
 
.expansion-phase { 
 
    background-color: #53752f; 
 
    color: #fff; 
 
    padding: 13px 22px 200px; 
 
    text-align: justify; 
 
    width: 86%; 
 
    margin-left: auto; 
 
    margin-right: auto; 
 
} 
 
.phase-title { 
 
    border-bottom: 1px solid #fff; 
 
    padding-bottom: 10px; 
 
}

<!-- Latest compiled and minified CSS --> 
 
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" integrity="sha384-1q8mTJOASx8j1Au+a5WDVnPi2lkFfwwEAa8hDDdjZlpLegxhjVME1fgjWPGmkzs7" crossorigin="anonymous"> 
 

 
<!-- Optional theme --> 
 
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap-theme.min.css" integrity="sha384-fLW2N01lMqjakBkx3l/M9EahuwpSfeNvV63J5ezn3uZzapT0u7EYsXMjQV+0En5r" crossorigin="anonymous"> 
 

 
<!-- Latest compiled and minified JavaScript --> 
 
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js" integrity="sha384-0mSbJDEHialfmuBBQP6A4Qrprq5OVfW37PRR3j5ELqxss1yVqOtnepnHVP9aJ7xS" crossorigin="anonymous"></script> 
 

 
<div class="container"> 
 
    <div class="row feature-description"> 
 
    <div class="col-lg-4"> 
 
     <div class="start-up-phase"> 
 
     <h4 class="phase-title"><strong>START UP PHASE</strong></h4> 
 
     <div class="phase-content"> 
 
      Startup phase is very crucial as reseller develop their first business partners group and hands on learning about their business culture, products and other important skills with the support of the leaders. At this point, reseller will get the most from 
 
      own effort and rewarded from the initial group development. 
 
      <?php load_helper('html'); echo br(4) ?> 
 
      <p> 
 
      High Margin Retail Opportunities, Personal Residual Income, Introducer Bonus and Group Placement Incentive dedicated for reseller in this phase. 
 
      </p> 
 
     </div> 
 
     </div> 
 
    </div> 
 
    <div class="col-lg-4"> 
 
     <div class="growth-phase"> 
 
     <h4 class="phase-title"> 
 
     <strong>START UP PHASE</strong> 
 
     </h4> 
 
     <div class="phase-content"> 
 
      Startup phase is very crucial as reseller develop their first business partners group and hands on learning about their business culture, products and other important skills with the support of the leaders. At this point, reseller will get the most from 
 
      own effort and rewarded from the initial group development. 
 
     </div> 
 
     </div> 
 
    </div> 
 
    <div class="col-lg-4"> 
 
     <div class="expansion-phase"> 
 
     <h4 class="phase-title"> 
 
     <strong>START UP PHASE</strong> 
 
     </h4> 
 
     <div class="phase-content"> 
 
      Startup phase is very crucial as reseller develop their first business partners group and hands on learning about their business culture, products and other important skills with the support of the leaders. At this point, reseller will get the most from 
 
      own effort and rewarded from the initial group development. 
 
     </div> 
 
     </div> 
 
    </div> 
 
    </div>

Answer 5

ecco la soluzione per mettere tutti i div in fondo.

.feature-description 
{ 
    margin-top: 20px; 
    padding-left:10%; 
    padding-right:10%; 
    position: relative; 
} 
.start-up-phase, .growth-phase, .expansion-phase{ 
     bottom: 0; 
} 

Continua il CSS:

.start-up fase {...