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

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

  * { 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% 的高度和宽度；您也可以使用绝对定位。这是示例

Answer 2

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

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;
}

演示