如何实现2行+ 1列网格布局

Question

我正在尝试提出一种简单的方法来创建一个类似于容器的网格，该容器有2列，一列分为2行，另一列为全高。这是一张图片，展示了我的追求。

看起来有点复杂，但我正在考虑使用响应式网格系统来让它看起来像我想要的那样。我尝试了各种网格布局，似乎没有人能够模仿我所追求的内容，主要是右列是全高，左列是分为两列。

有谁知道这样做的方法？我尝试过bootstrap但是我觉得它不够响应。如果我错了，请纠正我。非常感谢任何指导。

谢谢！

Answer 1

使用Bootstrap，这是一个示例结构。几乎任何响应式网格都是类似的。如果要编写自己的网格，请使用浏览器的文档检查器查看Bootstrap对行和列元素的作用。

<div class="container-fluid">
    <div class="row">
        <div class="col-xs-6">
            <div class="row">
                <div class="col-xs-12 pink"></div>
                <div class="col-xs-12 green"></div>
            </div>
        </div>
        <div class="col-xs-6 blue"></div>
    </div>
</div>

<强> Demo

---

如果你想要一些垂直填充屏幕的东西（但可能需要内部滚动条来包含你的内容），这样做：

div {
    position: absolute;
    width: 50%;
    height: 50%;
}
#one {
    top: 0;
    left: 0;
}
#two {
    top: 50%;
    left: 0;
}
#three {
    top: 0;
    left: 50%;
    height: 100%;
}

<强> Demo

<div id="one"></div>
<div id="two"></div>
<div id="three"></div>