CSS DIV在底部內聯

Question

我有3個分區在bottom inline 。 我不知道怎么做...任何人都可以幫助我？

預期產量：

我試過的代碼：

 .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

不幸的是，bootstrap使用float為他的網格系統。 所以垂直對齊有點粗糙。 您可以選擇使用display：inline-block或display：table（with display：table-cell on childrenrens）來獲得結果。 然后你只需要指定一個vertical-align：bottom。

Answer 3

您可以使用display:inline-block並且不要忘記刪除由display:inline-block 的額外空格

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

的jsfiddle

Answer 4

這可以解決它到底部，即使使用bootstrap。

.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-up-phase {...