使 3 列文本始终以相同的高度或行对齐，即使在调整大小时也是如此 window

Question

即使在调整 window 大小时，我也想让 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 的 block-wise 并将它们浮动到左侧。

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

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

}

使 3 列文本始终以相同的高度或行对齐，即使在调整大小时也是如此 window

Making 3 columns of text aligned at the same height or line all the time even while re sizing window

html

css

text

alignment

height