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

您可以使用display：table作为容器并显示：table-cell表示三列，这样它们的高度都相同。然后将按钮固定到底部，你就完成了:)

   .form-group
     = f.label :proyecto_imagenes, "Imágenes de proyecto", class: 'col-xs-2 file-input'
       .col-xs-8
         = f.file_field :imagenes, multiple: true
         %br
         #test

看看这个小提琴：line #11

Answer 2

完成此操作不需要相同的高度）只需在最外层的父级设置相对位置，并为{1}}设置position: absolute，而不指定bottom: 0和left。

＆＃13;

right

＆＃13;

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

＆＃13;

Answer 3

Floats在这里不会真正帮助你，因为它们不匹配高度。您将要将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;
}

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

3 个答案: