Question

这是某种高级CSS，所以坚持你的屁股！

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

现在，我已经看到了一些类似的问题，但我相信这种情况由于列上的左浮动而是唯一的。我可以用JavaScript完成这项工作，但我正在寻找一个CSS解决方案。

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/

使用CSS在网格布局内垂直扩展列

1 个答案: