帶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