css - 具有 3 个 DIV 的结构

Question

如何完成下面的结构？

这是我到目前为止得到的:

<style>
div{
    border: 1px solid;
}
#d1{
    width: 200px;
    height: 150px;
}
#d2{
    width: 200px;
    height: 100%;
}
#d3{
    width: 100%;
    height: 100%;
}
</style>

<div id="d1">
1
</div>
<div id="d2">
2
</div>
<div id="d3">
3
</div>

谢谢!

Answer 1

您可以使用 absolute 定位以及设置 top、bottom、left 和 来做到这一点对 根据需要像这样:

CSS

#d1, #d2, #d3  {
    border: 1px solid #000000;
    position: absolute;
}
#d1 {
    top: 0;
    height: 150px;
    left: 0;
    width: 200px;
}
#d2 {
    top: 150px;
    bottom: 0;
    left: 0;
    width: 200px;
}
#d3 {
    top: 0;
    bottom: 0;
    left: 200px;
    right: 0;
}

Demo