display : table을 사용하는 컨테이너의 맨 아래에 요소를 정렬하십시오.

Question

다양한 내용으로 동일한 높이가 필요한 3 개의 상자가 있습니다. 나는 이것을 달성하기 위해 display : table을 사용하고있다. 버튼을 컨테이너의 아래쪽에 수직으로 정렬해야합니다. 단추 너비도 변경 될 수 있습니다. 나는 성공적으로 수직 정렬을 할 수 없었습니다.

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

을 여기에 upda가있다. ted CodePen.

는 변화의 대부분은 .cta 클래스에 position:relative; 수정을 추가하고 클래스 .btn에 다음과 같은 규칙을주고 있었다 :

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

당신을 위해 문제의주의를 기울여야한다 그.

Answer 3

.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 4

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 5

당신은 추가 CSS를 아래에 추가 할 필요가 당신이 요청한대로 당신의 HTML을 표시합니다

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