html - 不同高度的网格系统 css

Question

我是 html&css 的新手，我正在尝试设置以下网格系统: current state

看起来像这样: desired solution

我的 html 代码包含 2 个主要 div(对于每个“行”)，每个包含 2 个 div( Logo + 注释，导航 + 内容) 我已经在每个 div 中使用了 display: inline-block，但仍然无法弄清楚如何将蓝色框直接放在黄色框下方？ 我更喜欢没有 jquery 插件的解决方案，这是最简单的解决方案 谢谢

代码:

.header {
  display: inline-block;
  width: 100%;
}
.logo {
  display: inline-block;
  width: 30%;
  height: 100px;
  background-color: red;
}
.notes {
  display: inline-block;
  width: 69%;
  height: 50px;
  background-color: yellow;
}
.nav {
  display: inline-block;
  width: 30%;
  height: 50px;
  background-color: green;
}
.content {
  display: inline-block;
  width: 69%;
  height: 50px;
  background-color: blue;
}

<div class="header">
  <div class="logo">
    Logo
  </div>
  <div class="notes">
    Notes
  </div>
</div>
<div class="main">
  <div class="nav">
    Nav
  </div>
  <div class="content">
    Content
  </div>
</div>

Answer 1

我知道这不是一个很好的方法，但这个方法很管用。以下是我为您所做的更改 .content:

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

这是最终代码:

.header {
  display: inline-block;
  width: 100%;
}
.logo {
  display: inline-block;
  width: 30%;
  height: 100px;
  background-color: red;
}
.notes {
  display: inline-block;
  width: 69%;
  height: 50px;
  background-color: yellow;
}
.nav {
  display: inline-block;
  width: 30%;
  height: 50px;
  background-color: green;
}
.content {
  display: inline-block;
  width: calc(69% - 10px);
  height: 50px;
  background-color: blue;
  position: fixed;
  top: 50px;
  left: calc(30% + 7px);
}

<div class="header">
  <div class="logo">
    Logo
  </div>
  <div class="notes">
    Notes
  </div>
</div>
<div class="main">
  <div class="nav">
    Nav
  </div>
  <div class="content">
    Content
  </div>
</div>