Question

我有3个盒子需要相同的高度和不同的内容。我正在使用display：table来实现这一点。我需要将按钮垂直对齐到容器的底部。按钮宽度也可能会改变。我无法成功获得vertical-align：bottom工作。

http://codepen.io/simply-simpy/pen/kBaHt

<div id="cta-3-col" class="cta-3-col">
    <div class="container">
        <div class="cta">
            <figure>
                <img src="http://lorempixel.com/200/100/" alt="">
                    <figcaption>
                        <h2>CTA 1</h2>
                        <p>Lorem ipsum dolor sit amet, consectetur adipisicing </p>
                    </figcaption>
            </figure>
            <a href="#" class="btn " role="button">Follow<i></i></a>
        </div>
        <div class="cta">
            <figure>
                <img src="http://lorempixel.com/200/100/" alt="">
                    <figcaption>
                        <h2>CTA 2</h2>
                        <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt magna aliqua sed do edunt ut labore et dolore magna aliqua. </p>
                    </figcaption>
            </figure>
            <a href="#" class="btn" role="button">Partner With Us<i></i></a>
        </div>
        <div class="cta">
            <figure>
                <img src="http://lorempixel.com/200/100/" alt="">
                    <figcaption>
                        <h2>CTA 3</h2>
                        <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. </p>
                    </figcaption>
            </figure>
            <a href="#" class="btn" role="button">Learn<i></i></a>
        </div>
    </div>
</div>

.cta {
    background: #fff;
    display: table-cell;
    width: 270px;
    padding: 0 0 30px;
 }
.cta-3-col {
    background: gray;
    text-align: center;
    border-spacing: 10px;
   }
 .container {
    display: table;
    width: 1000px;
    margin: 0 auto;
  }
.btn {
    background: blue;
    color: #fff;
    padding: 10px;
}

Answer 1

您只需更改/添加一些CSS属性到现有类，而无需添加额外的标记：

http://codepen.io/anon/pen/rFmxa

CSS：

.cta {
  background: #fff;
  display: table-cell;
  width: 270px;
  /*padding: 0 0 30px;*/
  padding: 0 0 4em;
  position: relative;
}

.cta-3-col {
  background: gray;
  text-align: center;
  border-spacing: 10px;
}

.container {
  display: table;
  width: 1000px;
  margin: 0 auto;
}

.btn {
  background: blue;
  color: #fff;
  padding: 10px;
  position: absolute;
  bottom: 0;
  margin-bottom: 1em;
  left: 50%;
 -webkit-transform: translateX(-50%); 
 -moz-transform: translateX(-50%);
 -ms-transform: translateX(-50%); 
 -o-transform: translateX(-50%);
 transform: translateX(-50%);
}

Answer 2

查看修改后的代码，没有复杂的转换 - 转换属性，可以在所有浏览器中使用，包括ols IE！

优于其他方法：高效，快速，跨浏览，轻松！

Codepen YourSolution

修改后的CSS

 .cta {
        background: #fff;
        display: table-cell;
        width: 270px;
        padding: 0 0 30px;
        position:relative;
    }

    .cta-3-col {
        background: gray;
        text-align: center;
        border-spacing: 10px;
        .container {
            display: table;
            width: 1000px;
            margin: 0 auto;
        }
    }

    p {
        margin:10px 0px 40px 0px;
    }

    a.btn {
        position: absolute;
        bottom: 10px;
        left: 0;
        right: 0px;
        width: 64px;
        margin: auto;
        background: blue;
        color: #fff;
        padding: 10px;
    }

Answer 3

这里有一个更新的CodePen。

大部分更改是向position:relative;类添加.cta修饰符，然后将以下规则提供给类.btn：

  position:absolute;
  bottom:5px;
  left:50%;
  -moz-transform:translateX(-50%);
  -webkit-transform:translateX(-50%);
  transform: translateX(-50%);

那应该为你解决问题。

Answer 4

.cta {
    background: #fff; 
    display: table-cell;
    width: 270px;
    padding: 0 0 40px;
    position:relative;
} 
.btn {
    background: blue;
    color: #fff; 
    padding: 10px; 
    position:absolute; 
    left:50%; 
    bottom:0; 
    -webkit-transform: translateX(-50%); 
    -moz-transform: translateX(-50%); 
    -ms-transform: translateX(-50%); 
    -o-transform: translateX(-50%); 
    transform: translateX(-50%);
}

Answer 5

您只需要在下面添加额外的css，它会根据您的要求显示您的HTML：

- .cta {position:relative;}
- .btn {position:absolute;left:45%;bottom:0px;}

将元素与使用display：table的容器底部对齐

5 个答案: