Question

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

我在响应式容器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>

Answer 1

尝试将col更改为：

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

底部对齐3响应div

1 个答案: