带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

您可以根据需要像这样设置top，bottom，left和right沿做到这一点使用absolute定位：

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

Answer 2

如果你可以改变元素的顺序，你可以这样做：

* { 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