底部对齐 3 个响应式 div答案

【问题标题】：bottom align 3 responsive divs底部对齐 3 个响应式 div
【发布时间】：2014-11-27 11:40:15
【问题描述】：

我是这个网站的忠实追随者，这是我第一次找不到我要找的东西。我希望有人能尽快帮助我。

我在响应式容器 div 中有 3 个 div。中间的 div 需要垂直对齐到底部。我该如何做到这一点？请帮忙

CSS：

/* 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>

【问题讨论】：

您的 HTML 非常混乱，请使用缩进，以便清楚 div 的打开和关闭位置。你能为我们创建一个 JSFiddle 吗？这样我对你的问题有更清晰的认识。我认为您可能需要在列上使用 inline-block 并设置 vertical-align:bottom;对他们来说，但我不确定。

标签： css vertical-alignment

【解决方案1】：

尝试将 col 更改为：

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

【讨论】：