html - 具有相同高度的容器未从顶部对齐

Question

我希望能够拥有相同高度的容器 - 无需设置固定高度 - 即使它们的内容文本数量不同。正如您在 codepen 链接上看到的那样，容器的高度不同，也没有从顶部对齐。基本上我想要实现的行为是让所有容器具有相同的高度(等于具有最大高度的容器的高度)，因此容器必须从顶部和底部对齐。

.info-block-tile-table{
  position: relative;
  overflow: hidden;
  display: table;
  table-layout: fixed;
  margin-bottom: 1rem;
  width: 100%;
}

.info-block-tile-row{
  display: table-row;
}

.info-block-tile-cell{
  width: 25%;
  display: table-cell;
  float: none;
  padding: 1rem;
}

.info-block-tile {
  border-top: 5px solid #69be28;
  border-right: 1px solid #dfe1e4;
  border-left: 1px solid #dfe1e4;
  border-bottom: 1px solid #dfe1e4;
  float: left;
  padding: 0.5rem
}




<div>

  <div class="info-block-tile-table">
    <div class="info-block-tile-row">
      <div class="info-block-tile-cell">
        <div class="info-block-tile">

          <h6 class="margin-top__0 margin-bottom__2 fiord font-weight-sourcesans__bold">Offering 1</h6>
          <p class="margin-top__0 margin-bottom__2 fiord font-weight-sourcesans__normal font-size__7">Lorem ipsum dolor
            sit amet, ius fastidii similique argumentum in, porro putent consetetur vix ut. Tibique percipitur ex vim,
            vim id idque soleat tibique, has te erant doctus complectitur. Nusquam oportere vituperata id cum, adipisci
            persecuti an pro. Eu vim facer graecis, id nec dicta integre interpretaris</p>


          <a href="http://www.google.com"
             class="aligned-bottom text-decoration__none rounded__thick corporateGreen white__hover background-corporateGreen__hover border border-width__2 font-size__6 padding-topbottom__1 margin-top__4 padding-leftright__4 position-float__left"
             target="_blank">
            <i class="fa fa-chevron-right"></i>
            Learn More
          </a>
        </div>


      </div>

      <div class="info-block-tile-cell">
        <div class="info-block-tile">

          <h6 class="margin-top__0 margin-bottom__2 fiord font-weight-sourcesans__bold">Offering 1</h6>
          <p class="margin-top__0 margin-bottom__2 fiord font-weight-sourcesans__normal font-size__7">Lorem ipsum dolor
            sit amet, ius fastidii similique argumentum in, porro putent consetetur vix ut. Tibique </p>


          <a href="http://www.google.com"
             class="aligned-bottom text-decoration__none rounded__thick corporateGreen white__hover background-corporateGreen__hover border border-width__2 font-size__6 padding-topbottom__1 margin-top__4 padding-leftright__4 position-float__left"
             target="_blank">
            <i class="fa fa-chevron-right"></i>
            Learn More
          </a>
        </div>


      </div>

      <div class="info-block-tile-cell">
        <div class="info-block-tile">

          <h6 class="margin-top__0 margin-bottom__2 fiord font-weight-sourcesans__bold">Offering 1</h6>
          <p class="margin-top__0 margin-bottom__2 fiord font-weight-sourcesans__normal font-size__7">Lorem ipsum dolor
            sit amet, ius fastidii similique argumentum in, porro putent consetetur vix ut. Tibique percipitur ex vim,
            vim id idque soleat tibique, has te erant doctus complectitur. Nusquam oportere vituperata id cum, adipisci
            persecuti an pro. Eu vim facer graecis, id nec dicta integre interpretaris</p>


          <a href="http://www.google.com"
             class="aligned-bottom text-decoration__none rounded__thick corporateGreen white__hover background-corporateGreen__hover border border-width__2 font-size__6 padding-topbottom__1 margin-top__4 padding-leftright__4 position-float__left"
             target="_blank">
            <i class="fa fa-chevron-right"></i>
            Learn More
          </a>
        </div>


      </div>

    </div>
    <div class="info-block-tile-row">
      <div class="info-block-tile-cell">
        <div class="info-block-tile">

          <h6 class="margin-top__0 margin-bottom__2 fiord font-weight-sourcesans__bold">Offering 1</h6>
          <p class="margin-top__0 margin-bottom__2 fiord font-weight-sourcesans__normal font-size__7">Lorem ipsum dolor
            sit amet, ius fastidii similique argumentum in, porro putent consetetur vix ut. T
          </p>


          <a href="http://www.google.com"
             class="aligned-bottom text-decoration__none rounded__thick corporateGreen white__hover background-corporateGreen__hover border border-width__2 font-size__6 padding-topbottom__1 margin-top__4 padding-leftright__4 position-float__left"
             target="_blank">
            <i class="fa fa-chevron-right"></i>
            Learn More
          </a>
        </div>


      </div>

      <div class="info-block-tile-cell">
        <div class="info-block-tile">

          <h6 class="margin-top__0 margin-bottom__2 fiord font-weight-sourcesans__bold">Offering 1</h6>
          <p class="margin-top__0 margin-bottom__2 fiord font-weight-sourcesans__normal font-size__7">Lorem ipsum dolor
            sit amet, ius fastidii similique argumentum in, porro putent consetetur vix ut. Tibique percipitur ex vim,
            vim id idque soleat tibique, has te erant doctus complectitur. Nusquam oportere vituperata id cum, adipisci
            persecuti an pro. Eu vim facer graecis, id nec dicta integre interpretaris</p>


          <a href="http://www.google.com"
             class="aligned-bottom text-decoration__none rounded__thick corporateGreen white__hover background-corporateGreen__hover border border-width__2 font-size__6 padding-topbottom__1 margin-top__4 padding-leftright__4 position-float__left"
             target="_blank">
            <i class="fa fa-chevron-right"></i>
            Learn More
          </a>
        </div>


      </div>

    </div>
  </div>

</div>

代码笔链接:http://codepen.io/neginbasiri/pen/wWvjba

Answer 1

要为一个 block align-top，你可以使用:

.info-block-tile-cell {
  // Your code
  vertical-align: top;
}

以及table-cell中容器的全高，添加更多代码:

.info-block-tile-table,
.info-block-tile {
  height: 100%;
}