bottom align 3 반응 divs

Question

나는이 웹 사이트의 예민한 사람이며, 내가 찾던 것을 찾을 수 없었습니다. 나는 누군가가 나를 도울 수 있기를 바랍니다.

응답 컨테이너 div 안에 3 개의 div가 있습니다. 중간 div는 수직으로 수직으로 정렬되어야합니다. 어떻게해야합니까?

/* COLUMN LAYOUT GRID CSS */ 
/* SECTIONS */ 
.section { 
clear: both; 
padding: 0px; 
margin: 0px; 
} 
.section img { 
width: 100%; 

} 
/* COLUMN SETUP */ 
.col { 
display: block; 
float:left; 
margin: 0 0 0 0; 
} 
#press-grid .col { 
margin: 1% 0 1% 1.5%; 

} 
.col:first-child { margin-left: 0; } 


/* GROUPING */ 
.group:before, 
.group:after { 
content:""; 
display:table; 
} 
.group:after { 
clear:both; 
} 
.group { 
zoom:1; /* For IE 6/7 */ 
} 
/* END OF GENERAL CSS */            

/* GRID OF TWO */ 

#featured-slider { 

} 
#featured-right { 

padding: 20px; 
} 
/* GRID OF THREE */ 
.span_3_of_3 { 
width: 100%; 
} 
.span_2_of_3 { 
width: 66.66%; 
} 
.span_1_of_3 { 
width: 33.33%; 
} 
#press-grid .span_1_of_3 { 
width: 31%; 
background-color: white; 
height: 500px; 
} 
/* GO FULL WIDTH AT LESS THAN 480 PIXELS */ 

@media only screen and (max-width: 798px) { 
.col { 
    margin: 1% 0 1% 0%; 
} 
} 

@media only screen and (max-width: 798px) { 
.span_1_of_3 { 
    width: 100%; 
} 
.span_2_of_3 { 
    width: 100%; 
} 
.span_3_of_3 { 
    width: 100%; 
} 
.featured-slider { 
    width: 100%; 
} 
#featured-right { 
    height: 150px; 
} 

} 
/* END COLUMN LAYOUT GRID CSS */ 

HTML :

<div class="content-section" id="cabin-mockup"> 
    <div class="container"> 
     <div class="row"> 
      <div class="section group"> 
       <div class="col span_1_of_3 text-center" id="home-mockup-left"> 
        <p>&nbsp; </p> 
        <p> 
         <i class="fa fa-paper-plane-o"></i> 
        </p> 
        <h3>Cabin Mockup</h3> 
        <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Donec quam felis, ultricies nec.</p> 
        <img src="/template/images/mockup2.jpg" alt="Aircraft Cabin Mockup" /> 
       </div> 
       <div class="col span_2_of_3 text-center" id="home-mockup-right"> 
        <img src="/template/images/mockup.jpg" alt="Aircraft Cabin Mockup" /> 
       </div> 
      </div> 
     </div> 
    </div> 
</div> 

Answer 1

한번에 변경 COL이에 :

CSS 도와주세요 그것은 어디 div의 명확 그래서

.col { 
    display: table-cell; 
    vertical-align:bottom; 
    margin: 0 0 0 0; 
}