html - CSS 应用递增高度但 div 应该停留在底部

Question

我有一个以时间线方式标记样式的 HTML 示例。我希望时间线中的元素沿途增加高度。这是 Bootstrap 时间线的示例模板。我尝试为内容添加行内高度，但高度发生变化并延伸到底部。我想向上延伸并粘住底部。让它看起来在上升

a {
  text-decoration: none
}

h4 {
  text-align: center;
  margin: 30px 0;
  color: #444
}

.main-timeline10:after,
.main-timeline10:before {
  content: "";
  display: block;
  width: 100%;
  clear: both
}

.main-timeline10 .timeline {
  padding: 0;
  display: -webkit-inline-box
}

.main-timeline10 .col-md-3 {
  -ms-flex: 0 0 25%;
  flex: 0 0 25%;
  max-width: 24%
}

.main-timeline10 .timeline-inner {
  text-align: center;
  margin: 20px 20px 35px 35px;
  position: relative
}

.main-timeline10 .timeline-inner:after {
  content: "";
  width: 120%;
  height: 3px;
  background: #555;
  position: absolute;
  bottom: 0;
  left: 10%
}

.main-timeline10 .timeline:last-child .timeline-inner:after {
  width: 0
}

.main-timeline10 .year {
  background: #58b25e;
  padding: 5px 0;
  border-radius: 30px 0;
  font-size: 26px;
  font-weight: 700;
  color: #fff;
  z-index: 1;
  position: relative
}

.main-timeline10 .year:after,
.main-timeline10 .year:before {
  position: absolute;
  top: -19px;
  content: ""
}

.main-timeline10 .year:before {
  right: 0;
  border: 10px solid transparent;
  border-bottom: 10px solid #58b25e;
  border-right: 10px solid #58b25e
}

.main-timeline10 .year:after {
  width: 25px;
  height: 19px;
  border-radius: 0 0 20px;
  background: #fff;
  right: 1px
}

.main-timeline10 .timeline-content {
  padding: 10px 10px 30px;
  border-left: 3px solid #58b25e;
  position: relative
}

.main-timeline10 .timeline-content:before {
  content: "";
  position: absolute;
  top: 0;
  left: -1px;
  border: 10px solid transparent;
  border-top: 10px solid #58b25e;
  border-left: 10px solid #58b25e
}

.main-timeline10 .timeline-content:after {
  content: "";
  width: 25px;
  height: 19px;
  border-radius: 20px 0 0;
  background: #fff;
  position: absolute;
  top: 0;
  left: 0
}

.main-timeline10 .post {
  font-size: 26px;
  color: #333
}

.main-timeline10 .description {
  font-size: 14px;
  color: #333
}

.main-timeline10 .timeline-icon {
  width: 70px;
  height: 70px;
  line-height: 65px;
  border-radius: 50%;
  border: 5px solid #58b25e;
  background: #fff;
  font-size: 30px;
  color: #555;
  z-index: 1;
  position: absolute;
  bottom: -35px;
  left: -35px
}

.main-timeline10 .timeline:nth-child(2n) .year {
  background: #9f84c4
}

.main-timeline10 .timeline:nth-child(2n) .year:before {
  border-bottom-color: #9f84c4;
  border-right-color: #9f84c4
}

.main-timeline10 .timeline:nth-child(2n) .timeline-content {
  border-left-color: #9f84c4
}

.main-timeline10 .timeline:nth-child(2n) .timeline-content:before {
  border-top-color: #9f84c4;
  border-left-color: #9f84c4
}

.main-timeline10 .timeline:nth-child(2n) .timeline-icon {
  border-color: #9f84c4
}

.main-timeline10 .timeline:nth-child(3n) .year {
  background: #f35958
}

.main-timeline10 .timeline:nth-child(3n) .year:before {
  border-bottom-color: #f35958;
  border-right-color: #f35958
}

.main-timeline10 .timeline:nth-child(3n) .timeline-content {
  border-left-color: #f35958
}

.main-timeline10 .timeline:nth-child(3n) .timeline-content:before {
  border-top-color: #f35958;
  border-left-color: #f35958
}

.main-timeline10 .timeline:nth-child(3n) .timeline-icon {
  border-color: #f35958
}

.main-timeline10 .timeline:nth-child(4n) .year {
  background: #e67e49
}

.main-timeline10 .timeline:nth-child(4n) .year:before {
  border-bottom-color: #e67e49;
  border-right-color: #e67e49
}

.main-timeline10 .timeline:nth-child(4n) .timeline-content {
  border-left-color: #e67e49
}

.main-timeline10 .timeline:nth-child(4n) .timeline-content:before {
  border-top-color: #e67e49;
  border-left-color: #e67e49
}

.main-timeline10 .timeline:nth-child(4n) .timeline-icon {
  border-color: #e67e49
}

@media only screen and (max-width:990px) {
  .main-timeline10 .timeline-inner:after {
    width: 110%
  }
  .main-timeline10 .timeline:nth-child(2n) .timeline-inner:after {
    width: 0
  }
}

@media only screen and (max-width:767px) {
  .main-timeline10 .timeline {
    margin-bottom: 50px
  }
  .main-timeline10 .timeline-inner:after,
  .main-timeline10 .timeline:nth-child(2n) .timeline-inner:after {
    width: 100%;
    height: 3px;
    left: 0
  }
}

<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.2.0/css/all.css" integrity="sha384-hWVjflwFxL6sNzntih27bfxkr27PmbbK/iSvJ+a4+0owXq79v+lsFkW54bOGbiDQ" crossorigin="anonymous">
<link href="//maxcdn.bootstrapcdn.com/bootstrap/4.1.1/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css">
<script src="//maxcdn.bootstrapcdn.com/bootstrap/4.1.1/js/bootstrap.min.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>

<div class="container">
  <h4>Timeline</h4>
  <div class="row">
    <div class="main-timeline10">
      <div class="col-md-3 col-sm-6 timeline">
        <div class="timeline-inner">
          <div class="year">2015</div>
          <div class="timeline-content">
            <div class="post">Web Desginer</div>
            <p class="description">
              Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec eget ullamcorper odio. Phasellus congue varius placerat. Quisque vel purus convallis.
            </p>
          </div>
          <div class="timeline-icon">
            <i class="fa fa-globe"></i>
          </div>
        </div>
      </div>
      <div class="col-md-3 col-sm-6 timeline">
        <div class="timeline-inner">
          <div class="year">2016</div>
          <div class="timeline-content">
            <div class="post">Web Developer</div>
            <p class="description">
              Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec eget ullamcorper odio. Phasellus congue varius placerat. Quisque vel purus convallis.
            </p>
          </div>
          <div class="timeline-icon">
            <i class="fa fa-rocket"></i>
          </div>
        </div>
      </div>
      <div class="col-md-3 col-sm-6 timeline">
        <div class="timeline-inner">
          <div class="year">2018</div>
          <div class="timeline-content">
            <div class="post">Web Desginer</div>
            <p class="description">
              Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec eget ullamcorper odio. Phasellus congue varius placerat. Quisque vel purus convallis.
            </p>
          </div>
          <div class="timeline-icon">
            <i class="fa fa-briefcase"></i>
          </div>
        </div>
      </div>
      <div class="col-md-3 col-sm-6 timeline">
        <div class="timeline-inner">
          <div class="year">2017</div>
          <div class="timeline-content">
            <div class="post">Web Developer</div>
            <p class="description">
              Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec eget ullamcorper odio. Phasellus congue varius placerat. Quisque vel purus convallis.
            </p>
          </div>
          <div class="timeline-icon">
            <i class="fa fa-camera"></i>
          </div>
        </div>
      </div>
    </div>
  </div>
</div>
<hr>

我想让 2016 年的高度比 2015 年高，2017 年的高度比 2016 年高，依此类推。

Answer 1

我已经根据您的要求更新了代码。我只是将 diplay:flex 用于您的主类，将 align-self: flex-end;display: flex; 用于您的子列。还增加了 2016 列的高度。

在 flexbox 元素上使用 align-self 实用程序来单独更改它们在横轴上的对齐方式(y 轴开始，x 轴，如果 flex-direction: column).从与 align-items 相同的选项中进行选择:start、end、center、baseline 或 stretch(浏览器默认)。

引用Bootstrap-4 Flex properties ;

a {
    text-decoration: none
}

h4 {
    text-align: center;
    margin: 30px 0;
    color: #444
}

.main-timeline10:after,
.main-timeline10:before {
    content: "";
    display: block;
    width: 100%;
    clear: both
}

.main-timeline10 .timeline {
    padding: 0;
    display: -webkit-inline-box
}

.main-timeline10 {
    display: flex;
}

.main-timeline10 .col-md-3.lgheight .timeline-content {
  min-height:500px;
}

.main-timeline10 .col-md-3 {
    -ms-flex: 0 0 25%;
    flex: 0 0 25%;
    max-width: 24%;
    align-self: flex-end;
    display: flex;
}

.main-timeline10 .timeline-inner {
    text-align: center;
    margin: 20px 20px 35px 35px;
    position: relative;
}

.main-timeline10 .timeline-inner:after {
    content: "";
    width: 120%;
    height: 3px;
    background: #555;
    position: absolute;
    bottom: 0;
    left: 10%
}

.main-timeline10 .timeline:last-child .timeline-inner:after {
    width: 0
}

.main-timeline10 .year {
    background: #58b25e;
    padding: 5px 0;
    border-radius: 30px 0;
    font-size: 26px;
    font-weight: 700;
    color: #fff;
    z-index: 1;
    position: relative
}

.main-timeline10 .year:after,
.main-timeline10 .year:before {
    position: absolute;
    top: -19px;
    content: ""
}

.main-timeline10 .year:before {
    right: 0;
    border: 10px solid transparent;
    border-bottom: 10px solid #58b25e;
    border-right: 10px solid #58b25e
}

.main-timeline10 .year:after {
    width: 25px;
    height: 19px;
    border-radius: 0 0 20px;
    background: #fff;
    right: 1px
}

.main-timeline10 .timeline-content {
    padding: 10px 10px 30px;
    border-left: 3px solid #58b25e;
    position: relative
}

.main-timeline10 .timeline-content:before {
    content: "";
    position: absolute;
    top: 0;
    left: -1px;
    border: 10px solid transparent;
    border-top: 10px solid #58b25e;
    border-left: 10px solid #58b25e
}

.main-timeline10 .timeline-content:after {
    content: "";
    width: 25px;
    height: 19px;
    border-radius: 20px 0 0;
    background: #fff;
    position: absolute;
    top: 0;
    left: 0
}

.main-timeline10 .post {
    font-size: 26px;
    color: #333
}

.main-timeline10 .description {
    font-size: 14px;
    color: #333
}

.main-timeline10 .timeline-icon {
    width: 70px;
    height: 70px;
    line-height: 65px;
    border-radius: 50%;
    border: 5px solid #58b25e;
    background: #fff;
    font-size: 30px;
    color: #555;
    z-index: 1;
    position: absolute;
    bottom: -35px;
    left: -35px
}

.main-timeline10 .timeline:nth-child(2n) .year {
    background: #9f84c4
}

.main-timeline10 .timeline:nth-child(2n) .year:before {
    border-bottom-color: #9f84c4;
    border-right-color: #9f84c4
}

.main-timeline10 .timeline:nth-child(2n) .timeline-content {
    border-left-color: #9f84c4
}

.main-timeline10 .timeline:nth-child(2n) .timeline-content:before {
    border-top-color: #9f84c4;
    border-left-color: #9f84c4
}

.main-timeline10 .timeline:nth-child(2n) .timeline-icon {
    border-color: #9f84c4
}

.main-timeline10 .timeline:nth-child(3n) .year {
    background: #f35958
}

.main-timeline10 .timeline:nth-child(3n) .year:before {
    border-bottom-color: #f35958;
    border-right-color: #f35958
}

.main-timeline10 .timeline:nth-child(3n) .timeline-content {
    border-left-color: #f35958
}

.main-timeline10 .timeline:nth-child(3n) .timeline-content:before {
    border-top-color: #f35958;
    border-left-color: #f35958
}

.main-timeline10 .timeline:nth-child(3n) .timeline-icon {
    border-color: #f35958
}

.main-timeline10 .timeline:nth-child(4n) .year {
    background: #e67e49
}

.main-timeline10 .timeline:nth-child(4n) .year:before {
    border-bottom-color: #e67e49;
    border-right-color: #e67e49
}

.main-timeline10 .timeline:nth-child(4n) .timeline-content {
    border-left-color: #e67e49
}

.main-timeline10 .timeline:nth-child(4n) .timeline-content:before {
    border-top-color: #e67e49;
    border-left-color: #e67e49
}

.main-timeline10 .timeline:nth-child(4n) .timeline-icon {
    border-color: #e67e49
}

@media only screen and (max-width:990px) {
    .main-timeline10 .timeline-inner:after {
        width: 110%
    }
    .main-timeline10 .timeline:nth-child(2n) .timeline-inner:after {
        width: 0
    }
}

@media only screen and (max-width:767px) {   
    .main-timeline10 .timeline {
        margin-bottom: 50px
    }
    .main-timeline10 .timeline-inner:after,
    .main-timeline10 .timeline:nth-child(2n) .timeline-inner:after {
        width: 100%;
        height: 3px;
        left: 0
    }
}

<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.2.0/css/all.css" integrity="sha384-hWVjflwFxL6sNzntih27bfxkr27PmbbK/iSvJ+a4+0owXq79v+lsFkW54bOGbiDQ" crossorigin="anonymous">
<link href="//maxcdn.bootstrapcdn.com/bootstrap/4.1.1/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css">
<script src="//cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<script src="//maxcdn.bootstrapcdn.com/bootstrap/4.1.1/js/bootstrap.min.js"></script>

<div class="container">
    <h4>Timeline</h4>
    <div class="row">
        <div class="main-timeline10">
            <div class="col-md-3 col-sm-6 timeline">
                <div class="timeline-inner">
                    <div class="year">2015</div>
                    <div class="timeline-content">
                        <div class="post">Web Desginer</div>
                        <p class="description">
                            Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec eget ullamcorper odio. Phasellus congue varius placerat. Quisque vel purus convallis.
                        </p>
                    </div>
                    <div class="timeline-icon">
                        <i class="fa fa-globe"></i>
                    </div>
                </div>
            </div>
            <div class="col-md-3 col-sm-6 timeline lgheight">
                <div class="timeline-inner">
                    <div class="year">2016</div>
                    <div class="timeline-content">
                        <div class="post">Web Developer</div>
                        <p class="description">
                            Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec eget ullamcorper odio. Phasellus congue varius placerat. Quisque vel purus convallis.
                        </p>
                    </div>
                    <div class="timeline-icon">
                        <i class="fa fa-rocket"></i>
                    </div>
                </div>
            </div>
            <div class="col-md-3 col-sm-6 timeline">
                <div class="timeline-inner">
                    <div class="year">2018</div>
                    <div class="timeline-content">
                        <div class="post">Web Desginer</div>
                        <p class="description">
                            Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec eget ullamcorper odio. Phasellus congue varius placerat. Quisque vel purus convallis.
                        </p>
                    </div>
                    <div class="timeline-icon">
                        <i class="fa fa-briefcase"></i>
                    </div>
                </div>
            </div>
            <div class="col-md-3 col-sm-6 timeline">
                <div class="timeline-inner">
                    <div class="year">2017</div>
                    <div class="timeline-content">
                        <div class="post">Web Developer</div>
                        <p class="description">
                            Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec eget ullamcorper odio. Phasellus congue varius placerat. Quisque vel purus convallis.
                        </p>
                    </div>
                    <div class="timeline-icon">
                        <i class="fa fa-camera"></i>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>
<hr>