CSS，HTML佈局

Question

我一直試圖讓我的頁面在下面有以下佈局，但沒有運氣。我想在第二欄中疊加這些框。任何人都可以指向正確的方向嗎？謝謝。

Answer 1

創建2個的div，一個用於左，一個在右，然後右手DIV中（它的尺寸與左側的div相同）具有3周的div作爲單獨的div。像這樣的事情在你的HTML：

<div id="left> 
....some stuff.... 
</div> 
<div id="rightContainer"> 
    <div id="top"> 
    ....some stuff.... 
    </div> 
    <div id="middle"> 
    ....some stuff.... 
    </div> 
    <div id="bottom"> 
    ....some stuff.... 
    </div> 
</div> 

你的CSS將是：

#left { 
width: 200px; 
float:left; 
height:600px; 
} 
#rightContainer { 
width: 200px; 
float:left; 
height:600px; 
} 
#top, #middle, #bottom { 
height:200px; 
width:100%; 
float:left; 
} 

應該是你需要什麼（或有abouts！）。

發佈您的代碼，到目前爲止，我相信我們可以做得更多:)

Answer 2

我已經創建了兩個JS小提琴給你看。兩者都使用％而不是固定數字，第一個在右側的水平容器之間有間距（儘管它們不與左側共享同一個底部），而第二個底部容器在底部右手側有一個絕對位置，從而在水平方向的容器之間的不均勻的空間： HTML：

<div id="left"> 

</div> 
<div id="right"> 
    <div id="row1"></div> 
    <div id="row2"></div> 
    <div id="row3"></div> 
</div> 

CSS：

#left { 
    display: inline-block; 
    border: 2px solid black; 
    height: 596px; 
    width: 30%; 
} 

#right { 
    position: relative; 
    display: inline-block; 
    height: 600px; 
    width: 60%; 
    margin-left: 8%; 
    vertical-align: top; 
} 

#row1, 
#row2, 
#row3 { 
    border: 2px solid black; 
} 

#row1, 
#row2 { 
    height: 30%; 
    margin-bottom: 5%; 
} 

#row3 { 
    height: 20%; 
} 

same spacing but different bottoms jsfiddle

HTML：

<div id="left"> 

</div> 
<div id="right"> 
    <div id="row1"></div> 
    <div id="row2"></div> 
    <div id="row3"></div> 
</div> 

CSS：

#left { 
    display: inline-block; 
    border: 2px solid black; 
    height: 596px; 
    width: 30%; 
} 

#right { 
    position: relative; 
    display: inline-block; 
    height: 600px; 
    width: 60%; 
    margin-left: 8%; 
    vertical-align: top; 
} 

#row1, 
#row2, 
#row3 { 
    border: 2px solid black; 
} 

#row1, 
#row2 { 
    height: 35%; 
    margin-bottom: 5%; 
} 

#row3 { 
    height: 20%; 
    position: absolute; 
    bottom: 0; 
    width: 100%; 
} 

same bottom but different spacing jsfiddle

那是接近你在找什麼？