Question

我有3个部门将inline放在bottom。我不知道如何做到这一点......任何人都可以帮助我吗？

预期产量：

我尝试的代码：

＆＃13;

.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;
}

＆＃13;

<!-- 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>

＆＃13;

Answer 1

您可以将flexbox与媒体查询一起使用https://jsfiddle.net/2Lzo9vfc/227/

net46

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; }

躲过的remove the extra spaces

$setPristine();

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;
}

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：

。开始向上相 {...

CSS DIV在底部内联

5 个答案: