html - 带有叠加列的两列布局 - 此处是否可以使用 flexbox 还是我需要解决显示 : inline-block?

Question

我正在构建一个两列布局，我只需要支持现代浏览器。这两列应填充其容器宽度的 100%。此外，我还有第三列，它需要与左侧列的宽度相同并位于其上方。

如果我不需要覆盖列，那么使用 flexbox 可以轻松解决这个问题。但是，我不确定是否可以告诉覆盖列它的宽度应与其下方的灵活列相同。因此，我使用百分比宽度的列，它们是 display: inline-block 并将 font-size: 0 应用于父元素以防止列之间的额外间距。

我的问题是:

• 是否可以使用灵活的列来实现这种效果？
• 如果不是，是否有更合适的方法来实现这种效果？我讨厌使用 font-size: 0
解决 display: inline-block 的隐式间距

有没有更合适的方式在现代浏览器中实现我的效果？

Here's my JSFiddle

<div class='page'>
    <div class='left column'>
    </div>
    <div class='left column overlay'>
    </div>
    <div class='right column'>
    </div>
</div>

.page {
    width: 400px;
    height: 400px;
    font-size: 0;
    position: relative;
}

.column {
    height: 100%;
    display: inline-block;
}

.left {
    width: 60%;
    background-color: green;
}

.right {
    width: 40%;   
    background-color: blue;
}

.overlay {
    display: none;
    background-color: yellow;
    position: absolute;
    left: 0;
}

Answer 1

是这样的吗？ http://jsfiddle.net/bluedao/su28zxea/

fiddle 代码

<div class="row-outer">
    <div class="row-inner">
        <div class="col col1">
            <div class="overlay">
                <span>Overlay</span>
            </div>
            <div>some text</div>
            <div>some more text</div>
        </div>
        <div class="col col2">
            <div>Content</div>
        </div>
    </div>
</div>

.row-outer {
    position: absolute;
    background: gray;
    width: 100%;
}

.row-inner {
    background: purple;
    position: relative;
}

.col {
    float: left;
}

.col1 {
    background: red;
    width: 40%;
}

.col2 {
    background: blue;
    width: 60%;

}

.overlay {
    position: absolute;
    background: green;
    width: 40%;
}