html - 使用 CSS 在网格布局中垂直扩展列

Question

这是某种高级 CSS，所以坚持住!

我有一个三列的网格。其中两列包含文本，一列什么也不包含。本练习的目标是让空列垂直扩展到最高列的高度。换句话说，空列应该垂直扩展到行 div 中。为什么？当然是 Google AdSense 动态广告尺寸。

现在，我已经看到一些类似的问题，但我相信由于列上的左侧 float ，这种情况是独一无二的。我可以使用 JavaScript 完成此操作，但我正在寻找 CSS 解决方案。

JSFIDDLE

HTML:

<div class='container'>
    <div class='row'>
        <div class='column'>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</div>
        <div class='column empty'>
            <!-- empty, but needs to expand into vertical space -->
        </div>
        <div class='column'>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</div>
        <div class='floatclear'>
            <!-- just to help show the structure -->
        </div>
    </div>
    <div class='floatclear'>
        <!-- just to help show the structure -->
    </div>
</div>

CSS:

* {
    box-sizing:border-box;
    text-align:justify;
}
.container {
    padding:24px 0;
    background-color:#DEA5A4;
}
.row {
    padding:0 24px;
    background-color:#CFCFC4;
}
.column {
    padding:24px;
    background-color:#CB99C9;
    float:left;
    width:33.333%;
}
.empty {
    border:#FDFD96 dotted 3px;
}
.floatclear {
    clear:both;
}

Answer 1

您可以将以下 css 属性添加到 .row 类

display: flex;

以下浏览器支持 flexbox:http://caniuse.com/#feat=flexbox

http://jsfiddle.net/deqbgaoc/3/