劃分DIV水平和垂直連續

Question

我需要能夠劃分每個div水平和垂直。我的解決方案很好，直到我寫一些內容，單元格不對齊。這是我在PC上得到的，看到頂部是錯誤的，綠色部分比黑色部分低。 這裏是我的解決方案的JSFiddle：http://jsfiddle.net/Q3r73/我做錯了什麼？

我用來分割的代碼是：

html, body{ 
    height: 100%; 
} 
div{ 
    width: 100%; 
    display: inline-table; 
} 
.horizontal, .vertical { 
    height: 100%; 
    width: 100%; 
} 
.horizontal > div { 
    height: 50%; 
    width: 100%; 
} 
.vertical > div { 
    height: 100%; 
    width: 50%; 
} 

我希望它是靈活的，任何的div應該能夠分割水平或垂直

Answer 1

檢查這個代碼也許會對你有幫助jsfiddle：

*{margin:0; padding:0;} 
html, body { 
    height: 100%; 
    width:100%; 
    overflow:hidden; 
} 
div { 
    display: block; 
} 
.left{ 
    height:100%; 
    width:50%; 
    float:left; 
    overflow:hidden; 
} 
.firstRight, .secondRight{ 
    height:100%; 
    width:25%; 
    float:left; 
} 
.firstRight{background-color:yellow;} 
.secondRight{background-color:red;} 
.top{ 
    width:100%; 
    height:50%; 
    float:left; 
    background-color:green; 
} 
.bottomLeft, .bottomRight{ 
    width:50%; 
    height:50%; 
    float:left; 
} 
.bottomLeft{background-color:yellow;} 
.bottomRight{background-color:red;} 

<div class="left"> 
    <div class="top"></div> 
    <div class="bottomLeft"></div> 
    <div class="bottomRight"></div> 
</div> 
<div class="firstRight"></div> 
<div class="secondRight"></div>