即使在调整窗口大小时,也可以使3列文本始终以相同的高度或线条对齐

Question

即使我调整窗口大小,我也想让3列始终以相同的高度对齐.问题是第三列没有与前两列对齐.当我达到1190宽度时会发生这种情况.

<footer>
<div class="f-container">
    <div class="container">
        <div class="f-item-3col">
            <h3>Location</h3>
            <p>123 My Street, city postal code QC</p>
        </div><!--
     --><div class="f-item-3col">
            <h3>Around the web</h3>
            <p>social media here</p>
        </div><!--
     --><div class="f-item-3col">
            <h3>About this site</h3>
            <p>This website is designed and developed by [your name here].</p>
        </div>
    </div>
</div>  
<div class="f-container-bottom">
    <div class="container">
        <div class="row"><div class="f-item-bottom">Copyright &copy; [website name] 2015</div>
    </div>
<div>

CSS

footer {
    text-align: center;
    color: #fff;
}

footer h3 {
    text-transform: uppercase;
    margin-bottom: 30px;
}

.f-container {
    position: relative;
    width: 100%;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
    padding-top: 50px;
    background-color: #2c3e50;
}

.f-container .f-item-3col {
    display: inline-block;
    width: 33.33333333%;
    box-sizing: border-box;
    -moz-box-sizing: border-box;
    margin-bottom: 50px;
}

.f-container-bottom {
    padding: 25px 0;
    background-color: #233140;
}

.f-container-bottom .f-item-bottom {
    width: 100%;
}

@media (max-width: 768px) {
    .f-container .f-item-3col {
        display: block;
        width: 100%;
    }
}

这甚至可能吗？对不起,我的英语不好.

Answer 1

以块为单位显示div 并将其浮动到左侧.

.f-container .f-item-3col
 {

    display:block;
    float:left;
    width: 33.33333333%;
    box-sizing: border-box;
    -moz-box-sizing: border-box;
    margin-bottom: 50px;

}