仅使用CSS对齐文本容器高度

Question

我在一行中有3个组件，我希望它们的按钮在容器底部对齐。但是每个容器都有不同的文字，所以它的高度不固定，我们不想严格高度。

我怎样才能实现容器只有通过CSS和兼容IE9以及？

.container-of-3 > div{ 
 
     float: left; 
 
     width: 33.33333333333%; 
 

 
     > img{ 
 
     margin-left: calc((100% - 90px)/2); 
 
     } 
 

 
    } 
 

 
    .button-link{ 
 
     background-color: #69be28; 
 
     color: #fff; 
 
     padding-top: 0.25rem; 
 
     padding-bottom: 0.25rem; 
 
     padding-left: 1rem; 
 
     padding-right: 1rem; 
 
     text-decoration: none; 
 
     border-radius: 5px; 
 
    }

<div class="container-of-3"> 
 
     <div> 
 
     <img src="http://placehold.it/90x90" class="" alt=""> 
 

 
     <h5 class="">Hybrid Cloud</h5> 
 

 
     <p class="">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="text-align__center"> 
 
      <a href="http://www.hotmail.com" class="button-link" target="_blank"> 
 
      <i class="fa fa-chevron-right"></i> 
 
     Read More</a> 
 
     </div> 
 

 
     </div> 
 

 
     <div> 
 

 

 
    <img src="http://placehold.it/90x90" class="" alt=""> 
 

 
    <h5>Hybrid Cloud</h5> 
 

 
    <p>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. </p> 
 

 
     <div class="text-align__center"> 
 
      <a href="http://www.hotmail.com" class="button-link" target="_blank"> 
 
      <i class="fa fa-chevron-right"></i> 
 
     Read More</a> 
 
      </div> 
 

 
     </div> 
 

 
     <div> 
 

 
    <img src="http://placehold.it/90x90" class="" alt=""> 
 

 
    <h5>Hybrid Cloud</h5> 
 

 
    <p>Lorem ipsum dolor sit amet</p> 
 

 
    <div class="text-align__center"> 
 
     <a href="http://www.hotmail.com" class="button-link" target="_blank"> 
 
     <i class="fa fa-chevron-right"></i> 
 
     Read More</a> 
 
    </div> 
 

 
     </div> 
 

 
    </div>

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

Answer 1

相同的高度没有必要让这个做）在最外侧的parent 只需设置位置相对的，设置为position: absolute，仅针对您的按钮使用bottom: 0，而不指定left和right。

.container-of-3 { 
 
    position: relative; 
 
    padding-bottom: 40px; 
 
    overflow: hidden; 
 
} 
 

 
.container-of-3 > div{ 
 
    float: left; 
 
    width: 33.33333333333%; 
 

 
    > img{ 
 
    margin-left: calc((100% - 90px)/2); 
 
    } 
 

 
} 
 

 
.div-content { 
 
    text-align: center; 
 
} 
 

 
.button-holder { 
 
    width: 33.33333333333%; 
 
    position: absolute; 
 
    text-align: center; 
 
    bottom: 0; 
 
} 
 

 
.button-link{ 
 
    background-color: #69be28; 
 
    display: inline-block; 
 
    vertical-align: top; 
 
    color: #fff; 
 
    padding-top: 0.25rem; 
 
    padding-bottom: 0.25rem; 
 
    padding-left: 1rem; 
 
    padding-right: 1rem; 
 
    text-decoration: none; 
 
    border-radius: 5px; 
 
}

<div class="container-of-3"> 
 
    <div> 
 
    <div class="div-content"> 
 
     <img src="http://placehold.it/90x90" class="" alt=""> 
 

 
     <h5 class="">Hybrid Cloud</h5> 
 

 
     <p class="">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> 
 

 
    <div class="text-align__center button-holder"> 
 
      <a href="http://www.hotmail.com" class="button-link" target="_blank"> 
 
      <i class="fa fa-chevron-right"></i> 
 
    Read More</a> 
 
    </div> 
 

 
    </div> 
 

 
    <div> 
 
     <div class="div-content"> 
 
      <img src="http://placehold.it/90x90" class="" alt=""> 
 
      <h5>Hybrid Cloud</h5> 
 
      <p>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. </p> 
 
     </div> 
 

 
    <div class="text-align__center button-holder"> 
 
     <a href="http://www.hotmail.com" class="button-link" target="_blank"> 
 
     <i class="fa fa-chevron-right"></i> 
 
    Read More</a> 
 
    </div> 
 
    </div> 
 

 
    <div> 
 
     <div class="div-content"> 
 
      <img src="http://placehold.it/90x90" class="" alt=""> 
 
      <h5>Hybrid Cloud</h5> 
 
      <p>Lorem ipsum dolor sit amet</p> 
 
     </div> 
 

 
<div class="text-align__center button-holder"> 
 
    <a href="http://www.hotmail.com" class="button-link" target="_blank"> 
 
    <i class="fa fa-chevron-right"></i> 
 
    Read More</a> 
 
</div> 
 

 
    </div> 
 

 
</div>

Answer 2

花车不会真正帮助你在这里，因为它们不匹配的高度。您需要将div更改为表格单元格方法。然后定位绝对的按钮，使它们始终对齐相同。由于Firefox 30左右所有浏览器都处理相对于表单元格元素的位置。下面的定位并不准确，所以你会想尝试不同数量的填充和定位，为你工作。

.container-of-3 { 
    display:table; 
    table-layout: fixed; 
    width:100% 

    > div { 
    display: table-cell; 
    position: relative; 
    vertical-align:top; 
    padding-bottom:50px; 

    > img{ 
     margin-left: calc((100% - 90px)/2); 
    } 
    } 
} 

.button-link{ 
    position: absolute; 
    bottom: 10px; 
    left: 0; 
    background-color: #69be28; 
    color: #fff; 
    padding-top: 0.25rem; 
    padding-bottom: 0.25rem; 
    padding-left: 1rem; 
    padding-right: 1rem; 
    text-decoration: none; 
    border-radius: 5px; 
} 

Answer 3

您可以使用display：table作为容器，display：table-cell为三列，这样它们的高度都是相同的。然后修复按钮底部，你就大功告成了:)

.container-of-3 { 
    display: table; 
} 
.container-of-3 > div{ 
    width: 33.33333333333%; 
    display:table-cell; 
    height: 100%; 
    padding-bottom: 20px; 
    position: relative; 
} 

检查出这个小提琴：https://jsfiddle.net/br6c5way/