结构有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

如果您可以更改元素序列，则可以执行以下操作：

  * { line-height:16px; } 
  #i1 { margin:0 0 0 200px; background-color:#eef; }
  #i2 { margin-top:-16px; width:200px; height:150px; background-color:#efe; }
  #i3 { width:200px; background-color:#fee;}

  <div id="i1">main right</div>
  <div id="i2">left top</div>
  <div id="i3">left bottom</div>

但显然如果你把你的左栏包装成另外一个div

会更容易

  <div id="left">
     <div id="i2">left top</div>
     <div id="i3">left bottom</div>
 </div>
 <div id="main">main</div>


 #left {float:left; width:200px; margin:0;padding:0;}
 #main {margin-left:200px; }
 #i2 { width:200px; height:150px; }
 #i3 { width:200px; }

更新：谈论100％的高度和宽度;你也可以使用绝对定位。 Here is example

Answer 2

您可以使用absolute定位以及根据需要设置top，bottom，left和right来执行此操作，如下所示：

<强> 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