Css 将div连续分为水平和垂直两部分

我需要能够划分水平和垂直的每个div。我的解决方案非常有效，直到我写了一些内容，单元格才对齐。这是我在我的电脑上看到的，上面有点发霉，绿色的部分比黑色的部分低。以下是我的解决方案：我做错了什么

我用来拆分的代码是：

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都应该能够水平或垂直分割

检查此代码可能会对您有所帮助：

*{margin:0；padding:0；}
html，正文{
身高：100%；
宽度：100%；
溢出：隐藏；
}
div{
显示：块；
}
.左{
身高：100%；
宽度：50%；
浮动：左；
溢出：隐藏；
}
.firstRight，.secondRight{
身高：100%；
宽度：25%；
浮动：左；
}
.firstRight{背景色：黄色；}
.secondRight{背景色：红色；}
.顶{
宽度：100%；
身高：50%；
浮动：左；
背景颜色：绿色；
}
.bottomLeft、.bottomRight{
宽度：50%；
身高：50%；
浮动：左；
}
.bottomLeft{背景色：黄色；}
.bottomRight{背景色：红色；}

您知道如何使用firebug查看与屏幕图像哪个部分相关的代码吗？如果没有，现在是时候开始了。这需要设置所有的可能性，我希望无论在哪里都能做到。但令人惊讶的是，添加float:left似乎可以

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