高度相同的容器不从顶部对齐

时间：2016-05-30 01:14:54

标签： html css sass

我希望能够拥有相同高度的容器 - 而无需设置修复高度 - 即使其内容文本的数量不同。正如您在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>

codepen link：http://codepen.io/neginbasiri/pen/wWvjba

4 个答案:

答案 0 :(得分：0)

对于某个块，align-top可以使用：

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

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

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

答案 1 :(得分：0)

更改CSS班级.info-block-tile-cell可让您按如下方式对齐：

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

您可以使用滚动条将图块设置为固定高度，如下所示：

.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;
    height:100%;
    overflow:auto;
}

答案 2 :(得分：0)

使用它，它将工作.. :)）

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

答案 3 :(得分：0)

好的，我解决了。以下是解决方案的链接供参考。

http://codepen.io/neginbasiri/pen/wWvjba 

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

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

      </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__10 fiord font-weight-sourcesans__normal font-size__7">Lorem ipsum dolor sit
          amet, ias te erant doctus complectitur. Nusquam oportere vituperata id cum, adipisci persecuti an
          pro. Eu vim facer graecis, id nec dicta integre interpretaris</p>

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

      </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__10 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>

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

      </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__10 fiord font-weight-sourcesans__normal font-size__7">Lorem ipsum dolor sit
          amet
          pro. Eu vim facer graecis, id nec dicta integre interpretaris</p>

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

      </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__10 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>

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

      </div>

    </div>




  </div>
</div>

风格：

.info-block-tile-table{
  position: relative;
  overflow: hidden;
  display: table;
  table-layout: fixed;
  width: 100%;
  border-collapse: separate;
  border-spacing: 2rem;
}

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

.info-block-tile-cell{
  width: 25%;
  display: table-cell;
  float: none;
  border-top: 5px solid #69be28;
  border-right: 1px solid #dfe1e4;
  border-left: 1px solid #dfe1e4;
  border-bottom: 1px solid #dfe1e4;
  position: relative;

}

.info-block-tile-cell .tile-button{
  position: absolute;
  bottom: 0px;
}

.tile-button-container{
  position: absolute;
  bottom: 0;
}

.tile-button-container > a{
  text-decoration: none;
  padding-left: 1rem;
  padding-right: 1rem;
  color: #69be28;
  border-radius: 5px;
  border-style: solid;
  border-width: 2px;
  padding-top: 0.25rem;
  padding-bottom: 0.25rem;
  float: left;
}

.margin-bottom__4 {
  margin-bottom: 1rem;
}


.margin-bottom__10 {
  margin-bottom: 2.25rem;
}

.info-block-tile {
  padding: 1rem;
}
相关问题
最新问题