将DIV分为水平和垂直连续

Question

我需要能够将每个div分为水平和垂直。我的解决方案很有效，直到我写了一些内容，单元格没有对齐。这是我在我的电脑上看到的，看到顶部是错误的，绿色部分低于黑色部分。 以下是我的解决方案的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>