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>

しかし、左側の列をもう 1 つの 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設定とともに配置を使用して行うことができます。topbottomleftright

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

デモ