CSS DIV Inline внизу

Question

У меня есть 3 отдела, чтобы положить inline на bottom. Я понятия не имею, как это сделать ... кто-нибудь может мне помочь?

Ожидаемый результат:

Коды, которые я пробовал:

.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

Вы можете использовать Flexbox с запросами средств массовой информации, чтобы сделать это 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

К сожалению, самозагрузки использование поплавка для своей системы сетки. Таким образом, вертикальное выравнивание является немного грубым. Вы можете использовать команду display: inline-block или display: table (with display: table-cell on childrens), чтобы получить результат. Тогда вам нужно просто указать вертикальное выравнивание: снизу.

Answer 3

Вы можете использовать display:inline-block и не забудьте remove the extra spaces который occuered по display:inline-block

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

Jsfiddle

Answer 4

это исправьте его, чтобы пойти на дно, даже с бутстрапом.

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

, чтобы сделать его похожим на лестнице, вы должны изменить 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

Вот решение поместить все Div в нижней.

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

Продолжить CSS:

.start-фаза безотказной {...