Html 不同高度网格系统

我不熟悉html和css，我正在尝试设置以下网格系统：

像这样：

我的html代码由每个“行”的2个主要div组成，每个div包含2个div徽标+注释、导航+内容 我在每个div中都使用了display:inline块，但仍然不知道如何将蓝色框直接放在黄色框的下面？ 我更喜欢没有jquery插件的解决方案，这是最简单的解决方案 谢谢

代码：

.标题{ 显示：内联块； 宽度：100%； } .标志{ 显示：内联块； 宽度：30%； 高度：100px； 背景色：红色； } .注释{ 显示：内联块； 宽度：69%； 高度：50px； 背景颜色：黄色； } .导航{ 显示：内联块； 宽度：30%； 高度：50px； 背景颜色：绿色； } .内容{ 显示：内联块； 宽度：69%； 高度：50px； 背景颜色：蓝色； } 标志 笔记 导航 所容纳之物

---

我知道这不是一个很好的方法，但是这个方法很有效。这是我给你的零钱。内容：

以下是最终代码：

.标题{ 显示：内联块； 宽度：100%； } .标志{ 显示：内联块； 宽度：30%； 高度：100px； 背景色：红色； } .注释{ 显示：内联块； 宽度：69%； 高度：50px； 背景颜色：黄色； } .导航{ 显示：内联块； 宽度：30%； 高度：50px； 背景颜色：绿色； } .内容{ 显示：内联块； 宽度：calc69%-10px； 高度：50px； 背景颜色：蓝色； 位置：固定； 顶部：50px； 左：calc30%+7px； } 标志 笔记 导航 所容纳之物

---

我会重新安排标记并制作两列

.标题{ 显示：内联块； 宽度：30%； 浮动：左； } .标志{ 高度：100px； 背景色：红色； } .注释{ 高度：50px； 背景颜色：黄色； } 梅因先生{ 左缘：30%； } .导航{ 高度：50px； 背景颜色：绿色； } .内容{ 高度：50px； 背景颜色：蓝色； } 标志 导航 笔记 所容纳之物

---

请发布您的代码。只使用一行而不是两行。这可能不可能仅使用CSS。新行中的项目不会上移以占用可用空间。有一种方法可以做到这一点，如果你做列而不是行，或者你可以使用砌体插件，我们只能帮助编辑你的代码。如果您不发布您的代码，无论是在外部源中，我们都无法做到这一点。JS拉小提琴或直接进入你的问题。@MichaelCoker代码现在在这里：谢谢！正如你所说，我检查了多柱的css砌体，它似乎不适合不同宽度柱的情况。然而，这个解决方案看起来非常简单well@user5618793没问题。不管怎么说，logo和nav应该放在一个标题中：如果你想更具语义，你应该使用、注释和内容。事实上，我仍然无法投票。。但是这个解决方案也很有效，谢谢！

  top: 50px;
  left: calc(30% + 7px);
  width: calc(69% - 10px);