Html 使用css放置框

我正在制作一个html页面，有3种框，我有20%的宽度（称为单框），40%的宽度称为双框（两者都有33%的高度）

另一个bbox是100%高（命名为foto框），40%宽

现在我想在旁边浮动：双盒子，单盒子，foto盒子。 然后我想要所有的单盒子，但是单bbox在foto盒子的100%下面。我怎么能

html，正文{
身高：100%；
背景色：#C5C5；
}
.屏幕{
宽度：98%；
身高：98%；
利润率：1%1%1%1%；
}
.配音盒{
宽度：40%；
身高：33%；
背景色：浅绿色；
浮动：左；
}
.单盒{
身高：33%；
宽度：20%；
背景色：黑色；
浮动：左；
}
.图片盒{
宽度：40%；
身高：100%；
背景色：深蓝色；
浮动：左；
}

利维

是否显示：网格不是选项？这是这种布局的典型用例。显示：网格不是选项吗？这是这种布局的典型用例。